DOM节点类型列举

在 JavaScript 中，DOM（Document Object Model）节点是 HTML 或 XML 文档的基本构建块。每个节点都有一个 nodeType 属性，用于标识节点的类型。以下是常见的 DOM 节点类型及其对应的 nodeType 值：

元素节点 (Element)

nodeType : 1
描述 : 表示 HTML 或 XML 文档中的元素（标签），如 <div>、<p>、<a> 等。

示例:

html 复制代码

<div id="example">Hello, World!</div>

javascript 复制代码

const element = document.getElementById("example");
console.log(element.nodeType); // 输出: 1

属性节点 (Attr)

nodeType : 2
描述 : 表示元素的属性，如 id、class、href 等。

示例:

html 复制代码

<a href="https://example.com">Link</a>

javascript 复制代码

const link = document.querySelector("a");
const attr = link.getAttributeNode("href");
console.log(attr.nodeType); // 输出: 2

文本节点 (Text)

nodeType : 3
描述: 表示元素或属性中的文本内容。

示例:

html 复制代码

<p>Hello, World!</p>

javascript 复制代码

const paragraph = document.querySelector("p");
const textNode = paragraph.childNodes[0]; // 获取文本节点
console.log(textNode.nodeType); // 输出: 3

注释节点 (Comment)

nodeType : 8
描述: 表示 HTML 或 XML 文档中的注释。

示例:

html 复制代码

<!-- This is a comment -->

javascript 复制代码

const comment = document.body.childNodes[0]; // 假设注释是第一个子节点
console.log(comment.nodeType); // 输出: 8

文档节点 (Document)

nodeType : 9
描述: 表示整个文档（根节点）。

示例 :

javascript 复制代码

console.log(document.nodeType); // 输出: 9

文档类型节点 (DocumentType)

nodeType : 10
描述 : 表示文档类型声明（如 <!DOCTYPE html>）。

示例:

html 复制代码

<!DOCTYPE html>

javascript 复制代码

const doctype = document.doctype;
console.log(doctype.nodeType); // 输出: 10

文档片段节点 (DocumentFragment)

nodeType : 11
描述: 表示一个轻量级的文档片段，用于高效地操作和插入多个节点。

示例 :

javascript 复制代码

const fragment = document.createDocumentFragment();
console.log(fragment.nodeType); // 输出: 11

CDATA 节点 (CDATASection)

nodeType : 4
描述: 表示 XML 文档中的 CDATA 部分（不解析的文本数据）。

示例 :

xml 复制代码

<![CDATA[<message>Hello, World!</message>]]>

实体引用节点 (EntityReference)

nodeType : 5
描述 : 表示 XML 文档中的实体引用（如 &）。
注意: 在 HTML 中不常用。

实体节点 (Entity)

nodeType : 6
描述: 表示 XML 文档中的实体定义。
注意: 在 HTML 中不常用。

处理指令节点 (ProcessingInstruction)

nodeType : 7
描述 : 表示 XML 文档中的处理指令（如 <?xml-stylesheet ...?>）。
注意: 在 HTML 中不常用。

总结

以下是常见的 DOM 节点类型及其 nodeType 值：

`nodeType`	节点类型	描述
`1`	元素节点 (`Element`)	HTML 或 XML 元素
`2`	属性节点 (`Attr`)	元素的属性
`3`	文本节点 (`Text`)	元素或属性中的文本内容
`4`	CDATA 节点 (`CDATASection`)	XML 中的 CDATA 部分
`5`	实体引用节点 (`EntityReference`)	XML 中的实体引用
`6`	实体节点 (`Entity`)	XML 中的实体定义
`7`	处理指令节点 (`ProcessingInstruction`)	XML 处理指令
`8`	注释节点 (`Comment`)	HTML 或 XML 注释
`9`	文档节点 (`Document`)	整个文档
`10`	文档类型节点 (`DocumentType`)	文档类型声明
`11`	文档片段节点 (`DocumentFragment`)	轻量级文档片段

在实际开发中，最常用的是元素节点 (1)、文本节点 (3) 和注释节点 (8)。通过 nodeType 可以快速判断节点的类型，从而进行相应的操作。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github