nextsibling属性,nextsiblingelement函数

nextSibling和nextElementSilbing使用以及解决兼容性问题

1、今天学习了获取兄弟节点的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点)
Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

<body> <div>啦啦啦</div> <div>我是div</div> <span>我是span</span> <script> var div = document.querySelector('div'); // nextSibling 下一个兄弟节点包含元素节点文本节点 console.log(div.nextSibling); console.log(div.previousSibling); </script></body>

但是结果却是…因为 nextSibing是获取下一个兄弟节点包含元素节点和文本节点所以会输出—#text
Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 Node.firstChild 和 Node.previousSibling 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点.

2、解决方法：使用 nextElementSibling() 可以获取下一个兄弟节点，但是它要 ie9 以上版本才支持

<body> <p>我是p</p> <div>我是div</div> <span>我是span</span> <script> var div = document.querySelector('div'); // nextSibling 下一个兄弟节点包含元素节点文本节点 console.log(div.nextSibling); console.log(div.previousSibling); //2.nextElementSibling 得到下一个兄弟元素节点但是ie9 以上支持 console.log(div.nextElementSibling); console.log(div.previousElementSibling); </script></body>

结果返回了我们想要的数据

3、如何解决 nextElementSilbing 的兼容性问题呢？-----可以自己封装一个兼容性的函数

function getNextElementSibling(element) { var ele = element; while (ele = ele.nextSibling) { if (ele.nodeType === 1) { return ele; } } return null; }