previousSibling 和 nextSibling 返回文本？答案

【问题标题】：previousSibling and nextSibling returns text?previousSibling 和 nextSibling 返回文本？
【发布时间】：2021-12-11 20:45:09
【问题描述】：

谁能解释一下为什么下面的代码返回#text而不是'li' ?

第一个 li 的下一个兄弟不应该是 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>

【问题讨论】：

尝试 previousElementSibling 和 nextElementSibling 仅用于元素。

标签： javascript html dom

【解决方案1】：

两者之间的空白也是一个节点。这就是 JS 库存在的原因。为您提供检索 element 兄弟姐妹等选项。

如果 HTML 源代码如下所示：

<ul>
<li id="A"></li><li id="B"></li>
</ul>

它会按您的预期工作，因为li 元素之间没有空格。

最近，又引入了两个属性，称为previousElementSibling 和nextElementSibling，它们忽略了那个空格。它适用于 IE9 及更高版本，其他主要浏览器现在支持它一段时间。

【讨论】：

我建议在您的答案中提及previousElementSibling 和nextElementSibling，以完成它。检索元素兄弟姐妹可以完全不使用任何使用这些方法的库，或者通过在while() 循环中重复调用previousSibling（或next...）来完成。
对xyzElementSibling 元素的支持非常好，甚至IE9 也有。可悲的是，IE8 没有，也不会像我们都希望的那样很快消失。 :-)
是的，IE8 已经脚踏实地了！

【解决方案2】：

更好的是使用'nextElementSibling'和'previousElementSibling'

【讨论】：