前言
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。
DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
本文深层次就DOM的相关操作，展开论述。
DOM基础知识
- 节点的类型
- 元素节点（Element Node）：表示HTML中的标签，例如
<div>、<p>、<a>等。元素节点是文档树的主要成分，可以包含其他节点作为子节点。- 文本节点（Text Node）：表示HTML标签中的文本内容。例如，在
<p>标签中的一段文字就是文本节点。- 注释节点（Comment Node）：表示HTML文档中的注释内容。注释节点以
<!--开头，以-->结尾。- 属性节点（Attribute Node）：表示HTML元素的属性。例如，
class、id、src等属性都属于属性节点。- 文档节点（Document Node）：表示整个HTML文档的根节点。在DOM树中，文档节点是所有其他节点的最高级父节点。
- 文档片段节点（Document Fragment Node）：表示一个独立的文档片段。文档片段节点可以包含其他节点，常用于临时存储和处理一系列节点。
- 获取节点的手段
通过ID获取节点：可以使用getElementById()方法，传入元素的ID来获取对应的节点。例如：
var myElement = document.getElementById("myId");
通过类名获取节点：可以使用getElementsByClassName()方法，传入类名来获取所有具有相同类名的节点组成的集合。该方法返回一个类数组对象。例如：
var myElements = document.getElementsByClassName("myClass");
通过标签名获取节点：可以使用getElementsByTagName()方法，传入标签名来获取所有具有相同标签名的节点组成的集合。该方法返回一个类数组对象。例如：
var myElements = document.getElementsByTagName("div");
通过选择器获取节点：可以使用querySelector()和querySelectorAll()方法来使用CSS选择器获取节点。querySelector()方法返回第一个匹配的节点，querySelectorAll()方法返回所有匹配的节点组成的集合。例如：
var myElement = document.querySelector("#myId"); var myElements = document.querySelectorAll(".myClass");
操作现有节点
我们通过操作DOM树来添加、删除和替换节点，从而动态修改网页的内容和结构。需要注意的是，这些方法都需要通过获取到相应的父节点才能进行操作。
- 添加节点
appendChild()：用于将一个新节点添加为目标节点的最后一个子节点。例如：
var parentElement = document.getElementById("parent"); var newElement = document.createElement("div"); parentElement.appendChild(newElement);
insertBefore()：用于在目标节点的特定子节点之前插入一个新节点。例如：
var parentElement = document.getElementById("parent"); var targetElement = document.getElementById("target"); var newElement = document.createElement("div"); parentElement.insertBefore(newElement, targetElement);
- 删除节点
removeChild()：用于从父节点中移除指定的子节点。例如：
var parentElement = document.getElementById("parent"); var childElement = document.getElementById("child"); parentElement.removeChild(childElement);
- 替换节点
replaceChild()：用一个新节点替换目标节点的子节点。例如：
var parentElement = document.getElementById("parent"); var targetElement = document.getElementById("target"); var newElement = document.createElement("div"); parentElement.replaceChild(newElement, targetElement);
创建新节点
createElement()：使用指定的标签名创建一个新的元素节点。可以通过document.createElement()方法来实现。例如：
var newElement = document.createElement("div");
这将创建一个新的<div>元素节点。
createTextNode()：创建一个包含指定文本内容的新文本节点。可以通过document.createTextNode()方法来实现。例如：
var textNode = document.createTextNode("Hello, world!");
这将创建一个包含文本内容"Hello, world!"的文本节点。
- 其他创建方法：除了上述常用方法外，还有其他一些特定目的的创建方法。例如：
createDocumentFragment()：创建一个空的文档片段节点。文档片段节点可以用来存储临时的DOM节点，然后一次性插入到文档中。createAttribute()：创建一个属性节点，用于为元素节点添加属性。createComment()：创建一个注释节点，用于在DOM中添加注释内容。
这些创建方法提供了灵活的方式来创建不同类型的节点，并根据需求灵活使用。
遍历节点树
A. parentNode 和 childNode：
parentNode：属性用于获取当前节点的父节点。通过访问该属性，我们可以获取到某个节点在DOM树中的直接父节点。childNodes：属性返回一个包含所有子节点的集合，以类数组对象形式表示。注意，该集合包含所有类型的节点，包括元素节点、文本节点、注释节点等。
B. firstChild、lastChild、nextSibling、previousSibling：
firstChild：属性表示当前节点的第一个子节点，如果没有子节点则返回null。lastChild：属性表示当前节点的最后一个子节点，如果没有子节点则返回null。nextSibling：属性表示当前节点的下一个兄弟节点，即与当前节点具有相同父节点的相邻节点。previousSibling：属性表示当前节点的上一个兄弟节点，即与当前节点具有相同父节点的前一个节点。
举几个例子，看起来直观一些：
var parentElement = document.getElementById("parent"); // 获取父节点 var parentNode = parentElement.parentNode; // 获取子节点集合 var childNodes = parentElement.childNodes; // 获取第一个子节点和最后一个子节点 var firstChild = parentElement.firstChild; var lastChild = parentElement.lastChild; // 遍历兄弟节点 var siblingNode = parentElement.firstChild; while (siblingNode) { // 处理兄弟节点 console.log(siblingNode); siblingNode = siblingNode.nextSibling; }
修改节点属性和样式
通过设置属性和样式，我们可以动态地调整节点的特征，从而实现网页的动态效果。
修改属性：
setAttribute(name, value)：设置节点的指定属性名为相应的值。例如：
var myElement = document.getElementById("myId"); myElement.setAttribute("class", "newClass");
- 直接修改属性值：通过直接赋值的方式修改节点的属性值。例如：
var myElement = document.getElementById("myId"); myElement.className = "newClass";
修改样式：
- 直接修改style属性：通过修改节点的style属性来设置具体的CSS样式。例如：
var myElement = document.getElementById("myId"); myElement.style.color = "red"; myElement.style.fontSize = "20px";
小栗子：
<!DOCTYPE html> <html> <head> <style> .highlight { color: red; font-weight: bold; } </style> </head> <body> <p id="myParagraph">Hello, world!</p> <script> var myElement = document.getElementById("myParagraph"); // 修改属性 myElement.setAttribute("class", "highlight"); // 修改样式 myElement.style.fontSize = "25px"; </script> </body> </html>
事件处理
- 添加事件监听器：
addEventListener(event, handler)：通过调用元素节点的addEventListener()方法来添加事件监听器。其中，event参数是事件类型，如"click"、"mouseover"等，handler参数是事件触发时执行的函数。例如：
var myButton = document.getElementById("myButton"); myButton.addEventListener("click", function() { // 处理点击事件的逻辑 console.log("Button clicked!"); });
- 事件冒泡和捕获：
事件冒泡和捕获是DOM事件模型中的两个阶段。在事件冒泡阶段，事件从最具体的元素（例如被点击的按钮）向上级元素（例如包含该按钮的容器）传播；而在事件捕获阶段，事件则从上级元素向最具体的元素传播。在实践中，默认情况下，大多数事件都是在冒泡阶段进行处理。
举个栗子：
<!DOCTYPE html> <html> <head> </head> <body> <button id="myButton">Click Me</button> <script> var myButton = document.getElementById("myButton"); // 添加事件监听器 myButton.addEventListener("click", function(event) { console.log("Button clicked!"); // 阻止事件冒泡 event.stopPropagation(); }); document.body.addEventListener("click", function() { console.log("Body clicked!"); }); </script> </body> </html>
我们给按钮元素添加了一个点击事件的监听器，当按钮被点击时，会输出"Button clicked!“。同时，我们还给页面的 body 元素添加了一个点击事件的监听器，当页面任意位置被点击时，会输出"Body clicked!”。这就是dom在事件处理中的魅力。
实践应用
动态创建表格
var table = document.createElement("table"); for (var i = 0; i < 3; i++) { var row = document.createElement("tr"); for (var j = 0; j < 3; j++) { var cell = document.createElement("td"); var cellText = document.createTextNode("Row " + i + ", Col " + j); cell.appendChild(cellText); row.appendChild(cell); } table.appendChild(row); } document.body.appendChild(table);
我们通过dom操作动态地创建了一个3x3的表格，并将其添加到了页面的 body 元素中。
动态更新列表
var list = document.createElement("ul"); for (var i = 0; i < 5; i++) { var item = document.createElement("li"); var itemText = document.createTextNode("Item " + i); item.appendChild(itemText); list.appendChild(item); } document.body.appendChild(list);
我们创建了一个包含5个列表项的无序列表，并将其添加到页面的 body 元素中。
除了动态创建表格和更新列表之外，DOM还可以用于许多其他实际应用。例如：
- 动态加载数据：通过JavaScript和DOM，可以实现异步加载数据并将其动态插入到网页中，从而实现动态内容的更新。
- 实现动画效果：通过修改DOM节点的样式和位置，可以实现各种动画效果，如淡入淡出、滑动等。
- 表单验证：可以使用DOM来获取表单元素的值，并进行验证和处理，以确保用户输入的准确性和完整性。
