详解JavaScript中12种DOM节点类型及属性判断

DOM节点的基础属性

无论节点类型如何，所有DOM节点至少拥有以下三个核心属性：

• nodeType：返回节点类型的整型常量值（1-12），是判断节点类型的最主要依据。
• nodeName：返回节点名称的字符串。对于元素节点是大写标签名，其他节点多为特定前缀（如 #text）。
• nodeValue：返回或设置节点的值。通常用于文本、注释或特性节点，元素节点通常为 null。

此外，标准浏览器支持 Node.ELEMENT_NODE 等静态常量来引用这些数字，但需注意IE8及以下版本浏览器不支持此写法，会报错提示Node未定义。

常见DOM节点类型详解

第1步：识别元素节点（Element Node）

目的：定位网页中的HTML标签结构。
参数：nodeType=1，nodeName为大写标签名，nodeValue=null。
示例：

console.log(document.body.nodeType); // 1
console.log(document.body.nodeName); // "BODY"

第2步：识别特性/属性节点（Attribute Node）

目的：获取HTML标签上的具体属性（如id、class）。注意它属于元素的子项，而非文档树直接路径。
参数：nodeType=2，nodeName为属性名，nodeValue为属性值。
示例：

<div id="test"></div>
var attr = test.attributes.id;
console.log(attr.nodeType, attr.nodeName, attr.nodeValue);
// 输出: 2 "id" "test"

第3步：识别文本节点（Text Node）

目的：捕获标签内部包裹的纯文本内容。
参数：nodeType=3，nodeName="#text"，nodeValue为文本内容。
示例：

<div>测试内容</div>
var txt = test.firstChild; // 假设第一个子节点是文本
console.log(txt.nodeType, txt.nodeName, txt.nodeValue);
// 输出: 3 "#text" "测试内容"

第4步：识别CDATA节点（CDATA Section）

目的：处理基于XML的文档中的特殊文本区域，通常在HTML中不直接使用。
参数：nodeType=4，nodeName="#cdata-section"，nodeValue为CDATA块内的原始内容。
格式：<![CDATA[ ... ]]>

第5步 & 第6步：识别实体引用与实体节点（Entity & EntityReference）

目的：主要用于XML文档中声明和使用实体（Entity）。

• 实体引用名称节点 (Entry Reference)：nodeType=5，表示对实体的使用（如 &publisher;）。
• 实体名称节点 (Entity Name)：nodeType=6，表示实体的声明（如 <!ENTITY ...>）。

第7步：识别处理指令节点（Processing Instruction）

目的：处理针对解析器的指令，最常见的是XML声明（）。
参数：nodeType=7，nodeName为指令目标（target），nodeValue为目标外的所有内容。

第8步：识别注释节点（Comment Node）

目的：获取网页代码中的注释部分，便于调试或隐藏逻辑。
参数：nodeType=8，nodeName="#comment"，nodeValue为注释文本。
示例：

<!-- 我是注释内容 -->
var com = myDiv.firstChild;
console.log(com.nodeType, com.nodeValue);
// 输出: 8 " 我是注释内容 "

第9步：识别文档节点（Document Node）

目的：代表整个HTML文档，即DOM树的根节点。
参数：nodeType=9，nodeName="#document"，nodeValue=null。
示例：

console.log(document.nodeType, document.nodeName);
// 输出: 9 "#document"

第10步：识别文档类型节点（Document Type Node）

目的：获取DOCTYPE声明信息，确认文档遵循的标准（如HTML5）。
参数：nodeType=10，nodeName为doctype名称（如 "html"），nodeValue=null。
示例：

// 
var dt = document.doctype || document.firstChild;
console.log(dt.nodeType, dt.nodeName);
// 输出: 10 "html"

第11步：识别文档片段节点（Document Fragment Node）

目的：创建一个轻量级的文档容器，用于批量操作DOM而减少重绘重排，提升性能。
参数：nodeType=11，nodeName="#document-fragment"，nodeValue=null。
示例：

var frag = document.createDocumentFragment();
console.log(frag.nodeType, frag.nodeName);
// 输出: 11 "#document-fragment"

第12步：识别DTD声明节点（Notation Node）

目的：在DTD或XSD中定义的符号，现代Web开发极少直接使用。
参数：nodeType=12，nodeName为符号名称，nodeValue=null。

总结

掌握这12种DOM节点类型有助于深入理解JavaScript对网页文档的解析机制。其中，元素节点(1)、文本节点(3)、注释节点(8)和文档节点(9)是日常开发最高频使用的类型。而CDATA、实体和处理指令节点多应用于XML处理场景。在实际编码中，利用 if(node.nodeType === 1) 等判断方式可以精准地筛选和操作所需的DOM元素。

以上就是JavaScript中12种DOM节点类型的详细内容，更多关于DOM节点属性操作及前端开发的资料请关注本站其它相关文章！