nextElementSibling 与 nextSibling 有啥区别

Posted 2023-03-05

【中文标题】nextElementSibling 与 nextSibling 有啥区别

【英文标题】：Whats the difference between nextElementSibling vs nextSiblingnextElementSibling 与 nextSibling 有什么区别

【发布时间】：2015-09-14 19:33:09

【问题描述】：

虽然我偶尔会得到奇怪的结果，但在我看来这些结果是一样的，所以有人可以描述一下不同之处吗？

【问题讨论】：

这能回答你的问题吗？ What is the difference between node.nextSibling and ChildNode.nextElementSibling?

【参考方案1】：

'nextSibling' 返回下一个 Node 对象，而 'nextElementSibling' 返回下一个 Element 对象，所以真正的问题可能是 Node 和 Element 之间的区别是什么？

基本上，元素由 html 标记指定，而节点是 DOM 中的任何对象，因此元素是节点，但节点也可以包含空格、cmets、文本字符或换行符形式的文本节点。有关元素与节点的更多信息，请参阅Difference between Node object and Element object?

即取下面的DOM sn -p

<div id="start"></div>
Me
<p>Hi</p>

使用 nextSibling 你会得到：

console.log(document.getElementById('start').nextSibling); // "\nMe\n"
console.log(document.getElementById('start').nextSibling.nextSibling); // "<p>

而使用 nextElementSibling 你会得到：

console.log(document.getElementById('start').nextElementSibling);// "<p>"

nextElementSibling 也是 IE10+，是较新的方法，而 nextSibling 具有完整的浏览器支持

【讨论】：

空白是文本。

还有更多内容。节点具有存储为nodeType 属性的类型。元素的 nodeType 为 1，还有 11 个其他元素（参见 MDN Node.nodeType）。并且 DOM 适用于 HTML 以外的文档。

好的，谢谢，这是有道理的，所以 nextElementSibling 对我来说似乎是最好的选择，因为我正在为 >IE10

构建

【参考方案2】：

nextSibling 将返回 DOM 中的下一个节点，很可能在当前网页场景中，它是一个空格，但 nextElementSibling 将只返回下一个元素，忽略中间的所有节点（如果有）。

相对于当前页面。问题的nextSibling 是TextNode(Whitespace)，但如果我想获得#answers，我将使用nextElementSibling