JS入门之节点的属性与关系

节点的属性

1. nodeName : 元素的标签名，切记是 ⼤写形式

2. nodeValue: text节点或comment节点的内容

3. nodeType: 节点的类型 每个节点有节点类型

-nodeType 总共有12种节点类型，
由1-12数值代表
1). 元素节点 = 1 => Node.ELEMENT_NODE(1)
2). 属性节点 = 2 => Node.ATTRIBUTE_NODE(2)
3). ⽂本节点 = 3 => Node.TEXT_NODE(3)
4). 注释节点 = 8 => Node.COMMENT_NODE(8)
5). ⽂档节点 = 9 => Node.DOCUMENT_NODE(9)

节点关系

1. parentNode

该节点的⽗节点 Document对象的⽗节点是null，⽊有⽗节点

2. childNodes

只读的类数组对象(NodeList)对象，它是该节点的⼦节点的实时表⽰(动态查 询的结果)

3. children

1). 由于IE9之前的版本与其他浏览器在处理⽂本节点中的空⽩符有差异，因此出 现了children属性
2). 这个属性是HTMLCollection的实例，只包含元素中元素的⼦节点

4. firstChild/lastChild

该节点的⼦节点找那个的第⼀个和最后⼀个，如果该节点没有⼦节点则为null

5. nextSibling/previoursSibling

该节点的兄弟节点中的前⼀个和下⼀个，具有相同⽗节点的两个为兄弟节点

特殊情况

对于元素之间的空格，IE9及之前版本不会返回⽂本节点，⽽其他所有浏览器都会 返回⽂本节点

这就导致了在使⽤childNodes和firstChild等属性的⾏为不⼀致

为了弥补该差异性，Element Traversal规范新定义了⼀组属性

1. childElementCount:
   返回⼦元素（不包括⽂本节点和注释）的个数
2. firstElementChild:
   指向第⼀个⼦元素，firstChild的元素版
3. lastElementChild:
   指向最后⼀个⼦元素，lastChild的元素版
4. previousElementSibling:
   指向前⼀个同辈元素； previousSibling的元素版
5. nextElementSibling:
   指向后⼀个同辈元素，nextSibling的元素版