javascript - nextElementSibling 和 nextSibling 有什么区别

Question

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

Answer 1

“nextSibling”返回下一个节点对象，而“nextElementSibling”返回下一个元素对象，所以真正的问题可能是节点和元素之间的区别是什么？

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

即采用以下 DOM 片段

<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 具有完整的浏览器支持