JavaScript DOM节点类型详解：12种Node类型及其属性解析

DOM节点类型概述

前言

DOM的核心功能是将网页文档转化为JavaScript可操作的对象模型，使得开发者能够通过脚本动态增删改查页面内容。浏览器依据DOM规范解析HTML文档，将其构建为一系列相互关联的节点，最终形成一棵树状结构。这棵DOM树的最小构成单元被称为节点（node），整个文档树由12种不同的节点类型共同组成。

属性

通常情况下，每个节点都具备三个基础属性：nodeType、nodeName和nodeValue。

由于节点类型存在差异，这三个属性的具体取值也会随之不同。

节点基本属性：nodeType、nodeName与nodeValue

nodeType

nodeType属性用于返回表示节点类型的整型常量。12种节点类型分别对应从1到12的整数值，用以区分不同的节点身份。

元素节点 Node.ELEMENT_NODE(1)

属性节点 Node.ATTRIBUTE_NODE(2)

文本节点 Node.TEXT_NODE(3)

CDATA节点 Node.CDATA_SECTION_NODE(4)

实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)

实体名称节点 Node.ENTITY_NODE(6)

处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点 Node.COMMENT_NODE(8)

文档节点 Node.DOCUMENT_NODE(9)

文档类型节点 Node.DOCUMENT_TYPE_NODE(10)

文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点 Node.NOTATION_NODE(12)

DOM规范定义了一个Node接口，在标准JavaScript环境中，该接口以Node类型的形式实现。然而，在IE8及更低版本的浏览器中，所有DOM对象均通过COM对象形式实现，因此这些旧版浏览器不支持直接访问Node对象的写法。

//在标准浏览器下返回1，而在IE8-浏览器中报错，提示Node未定义
console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName属性用于返回当前节点的名称字符串。

nodeValue

nodeValue属性用于获取或设置当前节点的值，其返回格式为字符串类型。

接下来，将严格按照节点类型常数值从1到12的顺序，对这12种节点类型进行详细说明。

12种DOM节点类型详解

【1】元素节点

元素节点（element）对应网页中的HTML标签。其nodeType值为1，nodeName为大写的标签名称，而nodeValue始终为null。

以body元素为例

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

【2】特性节点

特性节点（attribute）对应HTML标签的属性。它仅存在于元素的attributes属性中，并不直接作为DOM文档树的一部分存在。特性节点的nodeType值为2，nodeName为属性名，nodeValue为属性值。

现在，div元素有id="test"的属性

<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true 
</script>

【3】文本节点 文本节点（text）代表HTML标签内的文本内容。其nodeType值为3，nodeName固定为'#text'，nodeValue为实际的标签内容字符串。

现在，div元素内容为'测试'

<div id="test">测试</div>
<script>
var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true 
</script>

【4】CDATA节点

CDATASection类型专门针对基于XML的文档，仅出现在XML文档中，用于表示CDATA区域，其格式一般为

<![CDATA[
]]>

该类型节点的nodeType值为4，nodeName为'#cdata-section'，nodeValue为CDATA区域内部的内容。

【5】实体引用名称节点

实体是一个声明，指定了在XML中用于替代内容或标记的名称。实体包含两部分：首先，必须使用实体声明将名称绑定到替换内容，实体声明通过<!ENTITY name "value">语法在文档类型定义(DTD)或XML架构中创建；其次，在实体声明中定义的名称随后将在XML中使用，该名称在XML中使用时称为实体引用。

实体引用名称节点（entry_reference）的nodeType值为5，nodeName为实体引用的名称，nodeValue为null。

//实体名称
<!ENTITY publisher "Microsoft Press">
//实体名称引用
<pubinfo>Published by &publisher;</pubinfo>

【6】实体名称节点 上面已经详细解释过，就不再赘述

该节点的nodeType值为6，nodeName为实体名称，nodeValue为null。

【7】处理指令节点

处理指令节点（ProcessingInstruction）的nodeType值为7，nodeName为target，nodeValue为除去target之外的整个内容。

【8】注释节点

注释节点（comment）表示网页中的HTML注释。其nodeType值为8，nodeName为'#comment'，nodeValue为注释的具体内容。

现在，在id为myDiv的div元素中存在一个<!-- 我是注释内容 -->

<div id="myDiv"><!-- 我是注释内容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true 
</script>

【9】文档节点

文档节点（document）表示HTML文档本身，也称为根节点，指向document对象。其nodeType值为9，nodeName为'#document'，nodeValue为null。

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true 
</script>

【10】文档类型节点

文档类型节点（DocumentType）包含与文档doctype相关的所有信息。其nodeType值为10，nodeName为doctype的名称，nodeValue为null。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>

【11】文档片段节点

文档片段节点（DocumentFragment）在文档中没有对应的标记，是一种轻量级的文档容器，可以包含和控制节点，但不会像完整文档那样消耗额外资源。其nodeType值为11，nodeName为'#document-fragment'，nodeValue为null。

<script>
var nodeDocumentFragment = document.createDocumentFragment(); 
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>

【12】DTD声明节点

DTD声明节点（notation）代表DTD中声明的符号。其nodeType值为12，nodeName为符号名称，nodeValue为null。

总结

总结

在这12种DOM节点类型中，部分类型适用于XML文档，另一些则较少使用。对于常用类型，后续文章将陆续深入介绍。本文仅对12种节点类型进行概述，旨在帮助读者建立基础认知，希望本文能对大家有所帮助。