HTML DOM的nodeType值介绍

2023年6月10日下午12:36 • JavaScript

下面是详细讲解 HTML DOM 的 nodeType 值介绍的攻略。

什么是 HTML DOM

HTML DOM（文档对象模型）是把 HTML 文档呈现为树结构的方式，并且通过 DOM API（应用程序编程接口）提供了一组属性和方法来操作文档。

HTML DOM 的树结构由 HTML 元素（节点）和 HTML 元素之间的关系组成。HTML 元素是树中的节点，而文本、注释和属性等则是节点的内容。

HTML DOM 中有许多属性和方法可以操作 DOM 树结构中的节点，其中 nodeType 就是其中之一。

nodeType 的介绍

在 HTML DOM 中，每个节点和元素都有其对应的 nodeType 值，表示这个节点或元素类型的不同特征。以下是常见的 nodeType 值及其对应的含义：

1：元素节点
2：属性节点
3：文本节点
4：CDATA 节点
5：实体引用节点
6：实体节点
7：处理指令节点
8：注释节点
9：文档节点
10：文档类型节点
11：文档片段节点

其中，元素节点是 HTML 标签和其内部的内容，而属性节点是元素节点的属性。文本节点是元素节点中的文本内容，CDATA 节点是用于包含不应被解析的文本，实体引用和实体节点分别用于表示实体引用和实体，处理指令节点用于处理指令，注释节点用于表示注释，文档节点表示整个文档，文档类型节点用于表示文档类型，文档片段节点用于表示文档片段。

如何使用 nodeType

我们可以通过 nodeType 属性来获取一个节点的类型，如下面的示例：

<!DOCTYPE html>
<html>
<head>
  <title>nodeType 示例</title>
</head>
<body>
  <div id="container">
    <p>Hello World!</p>
  </div>

  <script>
    var container = document.getElementById('container');
    var p = container.firstChild;
    console.log(p.nodeType); // 输出：1
    console.log(p.firstChild.nodeType); // 输出：3
  </script>
</body>
</html>

在上面的示例中，我们使用 getElementById 方法获取 id 为 container 的 div 元素，然后使用 firstChild 属性获取其第一个子节点 p 元素。最后，我们分别使用 nodeType 属性获取了 p 元素和其第一个子节点的类型，并将其输出在控制台中。这里我们可以看到，p 元素的类型为 1，表示元素节点，而其第一个子节点的类型为 3，表示文本节点。

最后，我们可以通过判断一个节点的 nodeType 属性来执行不同的操作，例如针对不同的节点类型执行不同的逻辑。