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;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
