Question

有人可以澄清为什么下面的代码返回#text而不是＆＃39; li＆＃39; ？

不应该是第一个李的下一个兄弟吗？同样，上一个李的前任兄弟是李？

<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>

Answer 1

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

如果HTML源代码如下：

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

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

最近，又引入了另外两个属性，称为previousElementSibling和nextElementSibling，它们忽略了这个空格。它适用于IE9及以上，其他主流浏览器现在支持它。

previousSibling和nextSibling返回文本？

1 个答案: