nextSibling vs nextElementSibling - Javascript

在使用DOM操作时，有时需要遍历元素的相邻节点。其中两个常见方法是 nextSibling 和 nextElementSibling。这两个方法的返回值有些不同，需要根据实际情况选择使用。

nextSibling

nextSibling 方法返回指定节点之后的下一个节点，无论它是什么类型（元素节点、文本节点、注释节点等）。

// HTML 代码
<div id="parent">
  <p>First paragraph</p>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
  </ul>
  <p>Second paragraph</p>
</div>

// JavaScript 代码
const ul = document.querySelector('ul');
const nextNode = ul.nextSibling;
console.log(nextNode); // #text，因为 ul 后面有一个空格符和回车符

需要注意的是，因为 HTML 中有一些缩进和回车符等空白字符，所以 nextSibling 有时会返回一个文本节点。如果希望得到下一个元素节点，就需要使用 nextElementSibling 方法。

nextElementSibling

nextElementSibling 方法返回指定节点之后的下一个元素节点。

// HTML 代码
<div id="parent">
  <p>First paragraph</p>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
  </ul>
  <p>Second paragraph</p>
</div>

// JavaScript 代码
const ul = document.querySelector('ul');
const nextElementNode = ul.nextElementSibling;
console.log(nextElementNode); // <p>Second paragraph</p>

需要注意的是，nextElementSibling 方法只返回紧邻的下一个元素节点，如果不存在则返回 null。

总结

• nextSibling 方法返回指定节点之后的下一个节点，无论它是什么类型。
• nextElementSibling 方法返回指定节点之后的下一个元素节点。
• nextSibling 方法有时会返回一个文本节点，需要根据实际情况选择使用。