Dom的学习

🕗 发布于 2025-01-20 14:45 前端 javascript html

DOM（文档对象模型，Document Object Model）是一个编程接口，用于HTML和XML文档。它将文档表示为一个树形结构，其中每个节点都是文档的一部分，例如元素、属性和文本内容。通过DOM，开发者可以使用编程语言（如JavaScript）来动态访问和更新文档的内容、结构和样式。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <h1>欢迎</h1>
    <p>这是一个示例文档。</p>
</body>
</html>

在DOM中，这个文档的结构可以表示为：

一、查找

1、getElementById()

getElementById()通过id获取元素 获取符合条件的第一个对象

例如：

<body>
    <div id="aaa">点击我</div>
    <div id="aa">点击我也可以</div>
</body>

window.onload = function() {
    var obja = document.getElementById("aaa");
    console.log(obja);
    if (obja) { // 检查 obja 是否为 null
        obja.onclick = function() {
            alert("Element aaa clicked!");
        };
    }
    
    var objb = document.getElementById("aa");
    console.log(objb);
    if (objb) { // 检查 objb 是否为 null
        objb.onclick = function() {
            alert("Element aa clicked!");
        };
    }
};

2、getElementsByClassName()

getElementsByClassName("aa")
 根据元素名称查找  找到所有符合条件的对象组成的数组

    <div class="aa">点击我 1</div>
    <div class="aa">点击我 2</div>
    <div class="aa">点击我 3</div>
js
window.onload = function() {
    // 获取所有具有类名 "aa" 的元素
    var elements = document.getElementsByClassName("aa");
    console.log(elements); 
    for (let i = 0; i < elements.length; i++) {
        elements[i].onclick = function() {
        console.log("Element " + (i + 1) + " clicked!"); 
    };
}
};

3、getElementsByTagName()

根据元素名称查找  找到所有符合条件的对象组成的数组
var arr = document.getElementsByTagName("div")

    <div>这是第一个 DIV</div>
    <div>这是第二个 DIV</div>
    <div>这是第三个 DIV</div>
js
window.onload = function() {
    // 获取所有具有类名 "aa" 的元素
    var elements = document.getElementsByTagName("div");
    console.log(elements); 
    for (let i = 0; i < elements.length; i++) {
        elements[i].onclick = function() {
        console.log("Element " + (i + 1) + " clicked!"); 
    };
}
};

4、querySelector()

根据元素选择器查找 querySelector()获取符合条件的第一个对象
var obj = document.querySelector(".aa")

    <div class="aa">第一个符合条件的对象</div>
    <div class="aa">第二个符合条件的对象</div>
    <div class="bb">另一个对象</div>
js
window.onload = function() {
    // 使用 querySelector 获取第一个具有类名 "aa" 的元素
    var obj = document.querySelector(".aa");
        
    // 检查 obj 是否存在
    if (obj) {
        console.log("找到的对象内容: " + obj.textContent);
        // 可以对找到的元素进行操作，例如修改样式
        obj.style.backgroundColor = "yellow"; // 给找到的对象添加背景色
    } else {
        console.log("没有找到符合条件的对象");
    }
}

5、 querySelectorAll()

根据元素选择器查找 querySelectorAll()找到所有符合条件的对象组成的数组
var arr = document.querySelectorAll(".aa")

    <div class="aa">第一个符合条件的对象</div>
    <div class="aa">第二个符合条件的对象</div>
    <div class="bb">另一个对象</div>
    <div class="aa">第三个符合条件的对象</div>
js
window.onload = function() {
    // 使用 querySelectorAll 获取所有具有类名 "aa" 的元素
    var arr = document.querySelectorAll(".aa");
        
    // 遍历 NodeList 并输出每个元素的内容
    arr.forEach(function(element) {
        console.log("找到的对象内容: " + element.textContent);
    });
}

二、通过关系查找

1、找父亲 parentNode parentElement

<div class="parent">
        <div class="child">这是子元素</div>
    </div>
js
window.onload = function() {
    // 获取子元素
    var childElement = document.querySelector(".child");
    // 使用 parentNode 获取父节点
    var parentNode = childElement.parentNode;
    console.log("parentNode: ", parentNode); // 输出父节点
    // 使用 parentElement 获取父元素
    var parentElement = childElement.parentElement;
    console.log("parentElement: ", parentElement); // 输出父元素
    // 检查 parentNode 和 parentElement 是否相同
    if (parentNode === parentElement) {
        console.log("parentNode 和 parentElement 是相同的节点。");
    } else {
        console.log("parentNode 和 parentElement 是不同的节点。");
    }
}

2、找孩子 childNodes children

<div class="parent">
        <div class="child">这是子元素1</div>
        <div class="child">这是子元素2</div>
    </div>
js
window.onload = function() {
     // 获取父元素
     var parentElement = document.querySelector(".parent");

     // 使用 childNodes 获取所有子节点
     var allChildNodes = parentElement.childNodes;
     console.log("所有子节点 (childNodes):");
     allChildNodes.forEach(function(node) {
         console.log(node); // 打印每个子节点
     });

     // 使用 children 获取元素子节点
     var elementChildren = parentElement.children;
     console.log("所有子元素 (children):");
     Array.from(elementChildren).forEach(function(child) {
         console.log(child); // 打印每个子元素
     });
}

3、第一个孩子 firstChild firstElementChild

<div class="parent">
        <div class="child">这是子元素1</div>
        <div class="child">这是子元素2</div>
    </div>
js
window.onload = function() {
     // 获取父元素
     var parentElement = document.querySelector(".parent");

     // 使用 firstChild 获取第一个子节点
     var firstChild = parentElement.firstChild;
     console.log("第一个子节点 (firstChild):", firstChild); // 输出第一个子节点（可能是文本节点或注释）

     // 使用 firstElementChild 获取第一个元素子节点
     var firstElementChild = parentElement.firstElementChild;
     console.log("第一个元素子节点 (firstElementChild):", firstElementChild); // 输出第一个元素子节点
}

4、最后一个孩子 lastChild lastElementChild

// 获取父元素
        var parentElement = document.querySelector(".parent");

        // 使用 lastChild 获取最后一个子节点
        var lastChild = parentElement.lastChild;
        console.log("最后一个子节点 (lastChild):", lastChild); // 可能是注释或文本节点

        // 使用 lastElementChild 获取最后一个元素子节点
        var lastElementChild = parentElement.lastElementChild;
        console.log("最后一个元素子节点 (lastElementChild):", lastElementChild); // 输出最后一个元素子节点

5、上一个元素 previousSibling previousElementSibling

// 获取第三个元素
        var thirdElement = document.querySelector(".container .item:nth-child(3)");

        // 使用 previousSibling 获取上一个兄弟节点
        var previousSibling = thirdElement.previousSibling;
        if (previousSibling) {
            console.log("上一个兄弟节点 (previousSibling):", previousSibling);
            console.log("上一个兄弟节点的内容:", previousSibling.textContent || "没有内容");
        } else {
            console.log("没有上一个兄弟节点 (previousSibling)");
        }

        // 使用 previousElementSibling 获取上一个元素兄弟节点
        var previousElementSibling = thirdElement.previousElementSibling;
        if (previousElementSibling) {
            console.log("上一个元素兄弟节点 (previousElementSibling):", previousElementSibling);
            console.log("上一个元素兄弟节点的内容:", previousElementSibling.textContent);
        } else {
            console.log("没有上一个元素兄弟节点 (previousElementSibling)");
        }

6、下一个元素 nextSibling nextElementSibling

window.onload = function() {
    // 获取第二个元素
    var secondElement = document.querySelector(".container .item:nth-child(2)");

    // 使用 nextSibling 获取下一个兄弟节点
    var nextSibling = secondElement.nextSibling;
    if (nextSibling) {
        console.log("下一个兄弟节点 (nextSibling):", nextSibling);
    } else {
        console.log("没有下一个兄弟节点 (nextSibling)");
    }

    // 使用 nextElementSibling 获取下一个元素兄弟节点
    var nextElementSibling = secondElement.nextElementSibling;
    if (nextElementSibling) {
        console.log("下一个元素兄弟节点 (nextElementSibling):", nextElementSibling);
        console.log("下一个元素兄弟节点的内容:", nextElementSibling.textContent);
    } else {
        console.log("没有下一个元素兄弟节点 (nextElementSibling)");
    }
};

三、修改

1、改内容

innerText以文本形式呈现 innerHTML解析成标签 value收集用户信息的标签

<div id="box">
        <div id="div1" class="mr"><p>萌萌</p></div>
        <div  id="div2" class="mr"><p>明明</p></div>
      </div>
js
window.onload = function() {
    const div1=document.getElementById('div1')
    const div2=document.getElementById('div2')
    console.log(div1.innerText)
    console.log(div2.innerHTML)

}

value 修改用户信息

 <h2>用户信息收集</h2>
    <form id="userInfoForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required><br><br>

        <button type="submit">提交</button>
js
window.onload = function() {
    document.getElementById("userInfoForm").onsubmit = function(event) {
        event.preventDefault(); // 阻止默认提交行为

        // 收集用户输入的信息
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;

        // 输出收集到的信息
        console.log("姓名:", name);
        console.log("电子邮件:", email);
    };
}

2、改属性

原生属性对象.属性=值

<button id="myButton" class="old-class">点击我</button>
js
window.onload = function() {
     // 获取按钮元素
     var obj = document.getElementById("myButton");

     // 输出原来的 id
     console.log("原来的 id:", obj.id);

     // 改变 id 和 className
     obj.id = '77';
     obj.className = 'new-class';

     // 添加点击事件
     obj.onclick = function() {
         alert("按钮被点击了！");
     };

     // 输出新的 id 和 className
     console.log("新的 id:", obj.id);
     console.log("新的 className:", obj.className);
}

自定义属性

<div id="myDiv" data-fruit="banana">这是一个示例666</div>
js
 // 获取 div 元素
     var obj = document.getElementById("myDiv");

     // 获取自定义属性
     console.log("原来的自定义属性 data-fruit:", obj.getAttribute("data-fruit"));

     // 设置新的自定义属性
     obj.setAttribute("data-eat", "apple");

     // 输出更新后的自定义属性
     console.log("新的自定义属性 data-eat:", obj.getAttribute("data-eat"));

3、改样式

    <style>
        /* 初始样式 */
        #myDiv {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            margin-bottom: 20px;
            line-height: 100px; /* 使文本垂直居中 */
        }
    </style>
</head>
<body>
    <div id="myDiv" data-fruit="banana">这是一个示例666</div>
</body>
利用js进行修改
// 获取 div 元素
        var obj = document.getElementById("myDiv");

        // 改变样式属性
        obj.style.background = 'red';  // 改变背景颜色
        obj.style.color = 'blue';      // 改变文本颜色
        obj.style.fontSize = '50px';   // 改变字体大小

修改后

四、添加

1、创建元素

    <h2>现有列表</h2>
    <ul>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>
    <button id="addElementBtn">添加新元素</button>
    <button id="cloneElementBtn">复制列表</button>
    <div id="output"></div>
js
     // 添加新元素的功能
     document.getElementById("addElementBtn").onclick = function() {
        var newNode = document.createElement("h1");
        newNode.innerText = "新添加的元素";
        newNode.className = "xixi";
        newNode.style.background = "purple";

// 将新元素添加到输出区域
        document.getElementById("output").appendChild(newNode);
        console.log(newNode);
    };

    // 复制现有列表的功能
    document.getElementById("cloneElementBtn").onclick = function() {
        var oldNode = document.querySelector("ul");
        var newNode = oldNode.cloneNode(true); // 复制整个列表，包括子元素
        newNode.style.backgroundColor = "lightgray"; // 为复制的列表添加背景色

        // 将复制的列表添加到输出区域
        document.getElementById("output").appendChild(newNode);
        console.log(newNode);
    };

2、添加元素

       <h2>我的列表</h2>
    <ul id="myList">
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>
    <button id="addBtn">添加新项目</button>
    <button id="insertBtn">在项目 2 前插入新项目</button>
    <button id="replaceBtn">替换项目 3</button>
  
js
// 获取列表元素
var obj = document.getElementById("myList");

// 添加新项目的功能
document.getElementById("addBtn").onclick = function() {
    var newNode = document.createElement("li");
    newNode.innerText = "新添加的项目";
    obj.appendChild(newNode); // 在列表最后添加新项目
};

// 在项目 2 前插入新项目的功能
document.getElementById("insertBtn").onclick = function() {
    var newNode = document.createElement("li");
    newNode.innerText = "插入的项目";
    var h4 = obj.children[1]; // 获取项目 2
    obj.insertBefore(newNode, h4); // 在项目 2 前插入新项目
};

// 替换项目 3 的功能
document.getElementById("replaceBtn").onclick = function() {
    var newNode = document.createElement("li");
    newNode.innerText = "替换后的项目";
    var h4 = obj.children[2]; // 获取项目 3
    obj.replaceChild(newNode, h4); // 替换项目 3
};

五、删除

    <h2>我的列表</h2>
    <ul id="myList">
        <li>项目 1 <button class="deleteBtn">删除</button></li>
        <li>项目 2 <button class="deleteBtn">删除</button></li>
        <li>项目 3 <button class="deleteBtn">删除</button></li>
    </ul>
js
 // 删除项的功能
 var list = document.getElementById("myList");
        
 // 为所有删除按钮添加事件监听器
 var deleteButtons = document.querySelectorAll(".deleteBtn");
 deleteButtons.forEach(function(button) {
     button.onclick = function() {
         // 获取要删除的列表项
         var listItem = button.parentNode; // button 的父节点是 li
         list.removeChild(listItem); // 使用列表的 removeChild 方法删除
         // 或者使用: listItem.parentNode.removeChild(listItem);
     };
 });

附上一张网上的参考资料

参考链接：DOM操作精要-CSDN博客

原文地址：https://blog.csdn.net/m0_62581697/article/details/145229896

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：day01_项目介绍和环境搭建
下一篇：k8s的CICD实施项目

AIGC视频生成模型：Meta的Emu Video模型
本文详细介绍Meta的视频生成模型EmuVideo，作为Meta发布的第二款视频生成模型，在视频生成领域发挥关键作用。
阅读更多2025-01-20
[Spring] Eureka & SpringCloud LoadBalance
在最初的架构体系中,集群的概念还不那么流行,且机器数量也比较少,此时直接使用DNS+Nginx就可以满足几乎所有服务的发现.相关的注册信息直接配置在Nginx.但是随着微服务的流行与流量的激增,机器规
阅读更多2025-01-20
什么宠物最好养？
通过了解上述介绍的几种宠物，我们可以更加清楚地认识到，无论是仓鼠、金鱼、乌龟，还是龙猫、兔子、鹦鹉、刺猬、蜜袋鼯，只要我们用心对待，都能成为我们的忠实伙伴。而且，仓鼠的活动时间主要在晚上，白天大部分时
阅读更多2025-01-20
第4章线程安全与数据同步(Java高并发编程详解：多线程与系统设计)
上述解释的意思是：synchronized关键字可以实现一个简单的策略来防止线程干扰和内存一致性错误，如果一个对象对多个线程是可见的，那么对该对象的所有读或者写都将通过同步的方式来进行，具体表现如下。
阅读更多2025-01-20
【机器学习：三十、异常检测：原理与实践】
异常检测（Anomaly Detection）是一种用于识别数据中异常模式或异常点的技术，旨在发现与大部分数据行为不同的样本。它在工业监控、网络安全、金融欺诈检测等领域具有广泛应用。异常检测的目标是找
阅读更多2025-01-20
md中的特殊占位文件路径的替换
【代码】md中的特殊占位文件路径的替换。
阅读更多2025-01-20
A6.Springboot-LLama3.2服务自动化构建（三）——编写Pipeline构建仓库初始化脚本
编写Pipeline构建仓库初始化脚本
阅读更多2025-01-20
麒麟操作系统服务架构保姆级教程（十）rewrite跳转
如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情目录一、rewrite的概念及作用二、rewrite跳转标记1、last和break编辑编辑2、临时跳转和永久跳转三、rewrite
阅读更多2025-01-20
C++：bfs解决多源最短路与拓扑排序问题习题
多源最短路。拓扑排序问题
阅读更多2025-01-20
兼职全职招聘系统架构与功能分析
深入分析Java招聘系统功能以及系统架构，末尾总结该系统的技术要点。
阅读更多2025-01-20