节点操作之兄弟节点

220 阅读1分钟

节点操作之获取兄弟节点

前面我们了解了如何获取元素,我们通过document.getElementById等等来获取元素,但是这样的方法有很大的局限性,我们只能一个一个的去获取元素,很不方便。

那么有没有一种更方便的方式呢?

下面我们就开始学习节点操作。

兄弟节点

  1. nextSibling:获取下一个兄弟节点

    node.nextSibling

nextSibling属性返回当前节点的下一个兄弟节点,如果没有则返回null。

这个方法是返回当前元素的下一个兄弟元素的节点,包括文本节点,元素节点,样式节点等等。

  1. previousSibling:获取上一个兄弟节点

    node.previousSibling

previousSibling属性返回当前节点的上一个兄弟节点,如果没有则返回null。同样也是包含所有的节点:元素节点,文本节点,样式节点等等。

前面两个获取范围太广了,我们要是只要获取到元素怎么办呢?

  1. nextElementSibling:获取下一个兄弟元素

    node.nextElementSibling

nextElementSibling属性返回当前节点的下一个兄弟元素节点,如果没有则返回null。

  1. previousElementSibling:获取上一个兄弟元素

    node.previousElementSibling

prviouseElementSibling属性返回当前节点的上一个兄弟元素节点,如果没有则返回null。

其中:3.4有兼容性问题,只有ie9以上才能实现