node.nextSibling 和 ChildNode.nextElementSibling 有什么区别?

IT技术 javascript dom nodes
2021-03-15 09:35:05

<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').nextElementSiblingis span-02,但是document.getElementById('span-01').nextSibling是包含“顶层的一些文本”的文本节点(或者,正如@Manngo 在评论中指出的那样,将文本与上面的元素分开的空格——似乎有些浏览器把元素和非空白节点之间的空白转换为单独的节点,而其他节点则将其与文本的其余部分结合起来)。

实际上,它们在样本中可能并不相同。Firefox 将两个div元素之间的换行符视为文本节点(空白),因此.nextSibling会返回它。这是一种痛苦,但在技术上是可以接受的。
2021-05-11 09:35:05