javascript之DOM节点与节点树初步理解

DOM节点与节点树初步理解

DOM是由节点构成的。

节点：

Document：
整个节点树的顶层节点，代表整个文档

Document Type：
文档节点声明头

Element：
网页的各种标签

Atrribute：
网页元素的属性，例如：id，class等等

Text：
标签之间或标签包含的文本

Comment：
注释

Docment Fragment：
文档片段
浏览器提供了一个原生的节点Node，以上的七种节点都继承了Node，因此具备一些相同的属性和方法。

节点树：
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。

父：
parentNode

子：
childNodes

同级：
sibling

节点类型：
可以通过nodeType返回一个整数值，表示节点的类型。

Boolean(document.nodeType===Node.DOCUMENT_NODE //true

1.文档节点（document）：9，对应常量：Node.DOCUMENT_NODE
2.元素节点（element）：1，对应常量：Node.ELEMENT_NODE
3.属性节点（attr）：2，对应常量：Node.ATTRIBUTE_NODE
4.文本节点（text）：3，对应常量：Node.TEXT_NODE
5.文档片段节点（DocumentFragment）：11，对应常量：Node.DOCUMENT_FRAGMENT_NODE
6.文档类型节点（DodumentType）：10，对应常量：Node.DOCUMENT_TYPE_NODE
7.注释节点（Comment）：8，对应常量：Node.COMMENT_NODE