节点操作

为什么学习节点操作：

获取元素通常使用两种方式

1.利用DOM提供的方法获取元素

document.getElementByld0

document.getElementsByTagName0

document.querySelector等

逻辑性不强、繁琐

⒉利用节点层级关系获取元素

利用父子兄节点关系获取元素

逻辑性强，但是兼容性稍差

 

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

 

子节点：

parentNode.chilaNodes(标准)

parentNode.childodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意:返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

 

 

parentNode .firstChild

　　firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

parentNode . lastChild

　　lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode .firstElementChild  （第一个子元素）

 

兄弟节点：

node .nextSibling

nextsibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementsibling

nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。

node.previousElementsibling

previousElementsibling返回当前元素上一个兄弟节点，找不到测返回null

注意:这两个方法有兼容性问题，IE9以上才支持。

自己封装一个兼容性的函数