有人可以澄清为什么下面的代码返回#text 而不是'li' ？
第一个 li 的下一个 sibling 不应该是 li 吗？ 同样，最后一个 li 的前一个兄弟是 li ?
<body>
<ul>
<!-- comment -->
<li id="A"></li>
<li id="B"></li>
<!-- comment -->
</ul>
<script>
//cache selection of the ul
var ul = document.querySelector('ul');
//What is the nextSibling of the first li?
console.log(ul.querySelector('#A').nextSibling.nodeName); //logs text
//What is the previousSibling of the last li?
console.log(ul.querySelector('#B').previousSibling.nodeName); //logs text
</script>
</body>
最佳答案
两者之间的空白也是一个节点。这就是 JS 库存在的原因。为您提供检索元素 sibling 等选项。
如果 HTML 源代码如下所示:
<ul>
<li id="A"></li><li id="B"></li>
</ul>
它会如您所愿地工作，因为 li 元素之间没有空格。
最近，又引入了两个属性，称为 previousElementSibling 和 nextElementSibling，它们会忽略该空格。它适用于 IE9 及更高版本，其他主要浏览器现在也支持它一段时间。
关于javascript - previousSibling 和 nextSibling 返回文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30001482/