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>js
window.onload = function() {var obja = document.getElementById("aaa");console.log(obja);if (obja) { // 检查 obja 是否为 nullobja.onclick = function() {alert("Element aaa clicked!");};}var objb = document.getElementById("aa");console.log(objb);if (objb) { // 检查 objb 是否为 nullobjb.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");// 输出原来的 idconsole.log("原来的 id:", obj.id);// 改变 id 和 classNameobj.id = '77';obj.className = 'new-class';// 添加点击事件obj.onclick = function() {alert("按钮被点击了！");};// 输出新的 id 和 classNameconsole.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]; // 获取项目 2obj.insertBefore(newNode, h4); // 在项目 2 前插入新项目 };// 替换项目 3 的功能 document.getElementById("replaceBtn").onclick = function() {var newNode = document.createElement("li");newNode.innerText = "替换后的项目";var h4 = obj.children[2]; // 获取项目 3obj.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 的父节点是 lilist.removeChild(listItem); // 使用列表的 removeChild 方法删除// 或者使用: listItem.parentNode.removeChild(listItem);};});
附上一张网上的参考资料
参考链接：DOM操作精要-CSDN博客
