JS之DOM篇-DOM节点类型

若无特殊说明，DOM篇的所有文章适用于IE9+等现代浏览器

概述

DOM是JavaScript操作网页的接口，全称为文档对象模型。它的作用是将网页转成一个JS对象，从而可以使用JS对网页进行各种操作

浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再有这些节点组成一个树状结构。节点是DOM的最小组成单位，文档的树状结构由12中类型的节点组成。

一般的，节点都会拥有nodeType、nodeName、nodeValue属性

nodeType

nodeType属性返回节点类型的常数值，不同类型对应的常数值也不同

名称	类型	常数值
元素节点	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

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值，格式为字符串

下面根据节点类型对应的常数值顺序，对节点类型进行逐一说明

元素节点

元素节点对应HTML网页中的标签元素。nodeType值是1，nodeName值是大写的标签名，nodeValue值是null

// body元素
console.log(document.body.nodeType, document.body.nodeName, document.body.nodeValue) // 1 "BODY" null
console.log(Node.ELEMENT_NODE === 1, document.body.nodeType === Node.ELEMENT_NODE) // true true

属性节点

元素节点对应HTML网页中标签的属性。nodeType值是2，nodeName值是属性名称，nodeValue值是属性值

<div id="test">test</div>
<script>
  var attr = test.getAttributeNode('id')
  console.log(attr.nodeType, attr.nodeName, attr.nodeValue) // 2 "id" "test"
</script>

文本节点

文本节点代表HTML中标签元素的内容。nodeType值是3，nodeName值是#text，nodeValue值是标签元素的内容

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

CDATA节点

CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域。nodeType的值为4，nodeName的值为'#cdata-section'，nodevalue的值是CDATA区域中的内容

<![CDATA[
]]