JavaScript 节点操作 以及DOMDocument属性和方法

JavaScript 节点操作是指通过 JavaScript 操作 HTML 文档的各种元素及其属性的过程。这可以在 dom 节点中进行，通过 DOMDocument 提供的属性和方法可以轻松地实现节点操作。

DOMDocument 属性

DOMDocument 属性中包含了一些常用的属性，包括：

• documentElement：表示整个文档的根节点。
• childNodes：返回指定节点的所有子节点。
• firstChild：返回指定节点的第一个子节点。
• lastChild：返回指定节点的最后一个子节点。
• nextSibling：返回指定节点之后的下一个兄弟节点。
• previousSibling：返回指定节点之前的上一个兄弟节点。
• attributes：返回一个指定节点的属性节点列表。
• nodeName：返回节点名。
• nodeValue：返回节点的值。

可以通过以上属性对节点进行获取和操作。

DOMDocument 方法

DOMDocument 方法中包含了一些常用的方法，包括：

• createElement()：创建一个新的元素节点。
• createTextNode()：创建一个新的文本节点。
• getElementById()：根据元素 ID 查找元素节点。
• getElementsByTagName()：根据元素标签名查找元素节点。
• appendChild()：向指定节点的子节点列表的末尾添加新的子节点。
• removeChild()：从指定节点的子节点列表中删除一个子节点。
• replaceChild()：用新节点替换指定节点的子节点。
• cloneNode()：克隆一个节点。

可以通过以上方法对节点进行创建、查找、增删改查操作。

示例说明

下面是两个使用 DOMDocument 进行节点操作的示例说明。

示例一

# HTML

<div id="container"></div>

# JavaScript
const container = document.getElementById("container");

const newElem = document.createElement("p");
newElem.innerText = "这是一个新的段落。"

container.appendChild(newElem);

在以上示例中，我们首先通过 getElementById() 方法获取指定 ID 元素节点，然后通过 createElement() 方法创建一个新的元素节点。我们将其添加一个新的段落元素，并在段落元素中设置文本，最后通过 appendChild() 方法将其添加到 container 元素节点中。

示例二

# HTML

<div id="container">
  <p>这是一个段落。</p>
  <p>这也是一个段落。</p>
  <p>这是最后一个段落。</p>
</div>

# JavaScript
const container = document.getElementById("container");
const children = container.childNodes;

console.log(children[1].nodeName);
console.log(children[3].previousSibling);

在以上示例中，我们首先通过 getElementById() 方法获取指定 ID 元素节点，然后通过 childNodes 方法获取其所有子节点。我们通过 nodeName 属性获取第二个子节点的节点名，并通过 previousSibling 属性获取第三个子节点的上一兄弟节点。

这里需要注意的是 childNodes 包含了所有子节点，包括文本节点和元素节点，因此需要根据实际情况进行筛选。