节点操作

为什么学习节点操作:

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

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以上才支持。

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

 

posted @ 2022-04-09 14:54  今天穿秋裤了吗  阅读(45)  评论(0)    收藏  举报