node.nextSibling 和 ChildNode.nextElementSibling 有啥区别？

Posted 2023-02-19

【中文标题】node.nextSibling 和 ChildNode.nextElementSibling 有啥区别？

【英文标题】：What is the difference between node.nextSibling and ChildNode.nextElementSibling?node.nextSibling 和 ChildNode.nextElementSibling 有什么区别？

【发布时间】：2014-08-05 06:25:20

【问题描述】：

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

它们不是一回事吗？

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

【参考方案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 是包含“顶层的某些文本”的文本节点（或者，如 cmets 中的 @Manngo 所指出的，分隔该文本的空格来自上面元素的文本——似乎有些浏览器将元素和非空白节点之间的空白放在单独的节点中，而其他浏览器将其与文本的其余部分结合起来。

【讨论】：

实际上，它们在示例中可能不一样。 Firefox 将两个 div 元素之间的换行符视为文本节点（空白），因此 .nextSibling 将返回它。这是一种痛苦，但在技术上是可以接受的。