javascript - node.nextSibling 和 ChildNode.nextElementSibling 之间有什么区别？

Question

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

它们不是同一个东西吗？

两者都返回紧随其后的节点。我读了很多文章，但在我看来都喜欢同样的东西，但不知道在哪里使用其中一个与另一个？

Answer 1

nextElementSibling 始终返回一个元素。 nextSibling 可以返回任何类型的节点。它们对于您的示例是相同的，但在其他情况下有所不同，例如:

<p><span id="span-01">Here is span-01</span>
Some text at the top level
<span id="span-02">Here is span-02</span></p>

在本例中，document.getElementById('span-01').nextElementSibling 是 span-02，但 document.getElementById('span-01) ').nextSibling 是包含“顶层的一些文本”的文本节点(或者，正如 @Manngo 在评论中指出的那样，将该文本与上面的元素分隔开的空格 - 似乎有些浏览器将元素之间的空格和非空格节点放入单独的节点中，而其他人则将其与文本的其余部分结合起来)。