在 HTML DOM（文档对象模型）中，节点（Node） 是构成文档结构的基本单元。每个节点代表文档中的一个部分，如元素、属性、文本或注释等。理解节点的类型和层次结构，有助于更有效地操作和管理网页内容。

节点类型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点，主要包括以下类型：

  • 文档节点（Document Node）：整个文档的根节点。
  • 元素节点（Element Node）：每个 HTML 元素，如 <div>、<p> 等。
  • 文本节点（Text Node）：元素内的文本内容。
  • 属性节点（Attribute Node）：元素的属性，如 class、id 等。
  • 注释节点（Comment Node）：HTML 中的注释部分。

节点关系

在 DOM 树中，节点之间存在层级关系，常用以下术语描述：

  • 父节点（Parent Node）：直接包含子节点的节点。
  • 子节点（Child Node）：直接被父节点包含的节点。
  • 同胞节点（Sibling Node）：具有相同父节点的节点。

例如，以下 HTML 结构：

<!DOCTYPE html>
<html>
  <body>
    <h1>标题</h1>
    <p>段落。</p>
  </body>
</html>

对应的 DOM 树关系如下：

  • <html> 是根节点，没有父节点。
  • <body> 是 <html> 的子节点。
  • <h1> 和 <p> 是 <body> 的子节点，互为同胞节点。
  • 文本节点 “标题” 是 <h1> 的子节点。

操作节点

通过 JavaScript，可以对 DOM 节点进行各种操作：

  • 访问节点：使用方法如 getElementById、getElementsByTagName、querySelector 等获取节点。
  • 创建节点：使用 createElement 创建新的元素节点，使用 createTextNode 创建文本节点。
  • 添加节点：使用 appendChild、insertBefore 等方法将新节点添加到 DOM 树中。
  • 删除节点：使用 removeChild 方法从 DOM 树中移除节点。
  • 修改节点：更改节点的属性、内容或样式。

例如，向 <body> 添加一个新的段落：

// 创建新的段落元素
var newParagraph = document.createElement("p");
// 创建文本节点
var textNode = document.createTextNode("这是一个新段落。");
// 将文本节点添加到段落元素中
newParagraph.appendChild(textNode);
// 将新的段落元素添加到 body 中
document.body.appendChild(newParagraph);

通过熟练掌握 DOM 节点的类型和操作方法，开发者可以动态地控制和更新网页内容，提升用户体验。