什么是nextElementSibling和nextSibling之间的区别

Question

虽然我似乎偶尔会得到奇怪的结果,但这些似乎与我相同,所以有人可以描述这种差异吗？

Answer 1

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

基本上,元素由HTML标记指定,而节点是DOM中的任何对象,因此元素是节点,但节点还可以包括空白,注释,文本字符或换行符形式的文本节点.有关元素与节点的更多信息,请参阅Node对象和Element对象之间的这种差异？

即采取以下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拥有完整的浏览器支持