节点操作
为什么学习节点操作:
获取元素通常使用两种方式
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以上才支持。
自己封装一个兼容性的函数