JavaScript中的节点类型

2018/07/31

2.1 使用率较高的节点类型

元素节点	nodeType	例子
元素节点	Node.ELEMENT_NODE(1)	<div>, <input>
属性节点	Node.ATTRIBUTE_NODE(2)	type, src, class, id
文本节点	Node.TEXT_NODE(3)	<div>我是文本节点</div>

1. 元素节点
   我对元素节点的理解：它就是HTML页面中的标签
   例如:

<div>我被元素节点div包围了</div>
<p>我被元素节点p包围了</p>
<span>我被元素节点span包围了</span>

举例:
HTML:
<div id="div">Hello</div>
JavaScript:
let divElement = document.querySelector('#div')
结果：

image.png
可以看到结果中是一个元素节点所包含的属性， 其nodeType为1, nodeName为其标签名。

2. 属性节点
   我对属性节点的理解， 就是HTML标签的属性
   例如：

<input type="text" data-value="我的key是属性节点" class="attribute"/>

举例：
HTML：
<input type="text" data-value="我的key是属性节点" class="attribute" id="input"/>
JavaScript:

let divElement = document.querySelector('#input')
let attributes = divElement.attributes
let idAttributeElement = attributes.id
console.log(idAttributeElement)

结果：

image.png

从结果中可以看到， 属性节点的nodeType为2， nodeName就是属性名

3. 文本节点
   我对文件节点的理解就是它HTML标签中的文本内容， 但是并不是通过innerHTML获取， 而是通过element.firstChild。
   例如：

<div>我是文本节点</div>

举例：
HTML：
<div id="div">我是文本节点</div>
JavaScript：

let divElement = document.querySelector('#div')
let textElement = divElement.firstChild
console.log(textElement)

image.png

结果：
文本节点的nodeType为3， nodeName为"#text"

2.2 其他节点类型

元素节点	nodeType	简介
CDATA节点	Node.CDATA_SECTION_NODE(4)	只针对基于XML的文档
实体引用名称节点	Node.ENTRY_REFERENCE_NODE(5)
实体名称节点	Node.ENTITY_NODE(6)
处理指令节点	Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点	Node.COMMENT_NODE(8)	判断注释节点
文档节点	Node.DOCUMENT_NODE(9)	Document根节点，document.firstChild
文档类型节点	Node.DOCUMENT_TYPE_NODE(10)
文档碎片节点	Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点	Node.NOTATION_NODE(12)

其余9项我还没有碰到过， 碰到坑的时候回来整理。

//今天月底，女朋友陪我等着开炉石卡包 2018/07/31 23:42