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 在评论中指出的那样，将该文本与上面的元素分开的空白——似乎有些浏览器将元素之间的空白和非空白节点放入单独的节点中，而其他人将其与文本的其余部分组合起来)。