前端（十四）——DOM节点操作手册：你需要了解的一切

博主：小猫娃来啦
文章核心：DOM节点操作手册：你需要了解的一切

前言

DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。

DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。

本文深层次就DOM的相关操作，展开论述。

DOM基础知识

• 节点的类型

• 元素节点（Element Node）：表示HTML中的标签，例如

  、

  、等。元素节点是文档树的主要成分，可以包含其他节点作为子节点。

• 文本节点（Text Node）：表示HTML标签中的文本内容。例如，在

  标签中的一段文字就是文本节点。

• 注释节点（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);

---

创建新节点

1. createElement()：使用指定的标签名创建一个新的元素节点。可以通过document.createElement()方法来实现。例如：

var newElement = document.createElement("div");

这将创建一个新的

元素节点。

2. createTextNode()：创建一个包含指定文本内容的新文本节点。可以通过document.createTextNode()方法来实现。例如：

var textNode = document.createTextNode("Hello, world!");

这将创建一个包含文本内容"Hello, world!"的文本节点。

3. 其他创建方法：除了上述常用方法外，还有其他一些特定目的的创建方法。例如：

• 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 Mebutton>

  <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来获取表单元素的值，并进行验证和处理，以确保用户输入的准确性和完整性。

---