📌  相关文章
📜  HTML | DOM nextElementSibling 属性(1)

📅  最后修改于: 2023-12-03 15:31:12.241000             🧑  作者: Mango

HTML | DOM nextElementSibling 属性

介绍

nextElementSibling 属性返回当前元素之后紧邻的下一个兄弟元素，如果没有兄弟元素，则返回 null。

这个属性的使用是为了方便遍历兄弟元素，不需要再以循环的方式自行查找兄弟元素。

用法
var nextSiblingElement = element.nextElementSibling;
实例

下面的实例展示了如何通过 nextElementSibling 属性找到当前元素的下一个兄弟元素：

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>nextElementSibling 实例</title>
  </head>
  <body>
    <div>
      <h2>First H2</h2>
      <p>First Paragraph</p>
    </div>
    <div>
      <h2>Second H2</h2>
      <p>Second Paragraph</p>
    </div>
    <div>
      <h2>Third H2</h2>
      <p>Third Paragraph</p>
    </div>

    <script>
      var firstH2 = document.querySelector("h2");
      var secondH2 = firstH2.nextElementSibling;

      console.log("第一个 H2 元素是：", firstH2.textContent);
      console.log("第二个 H2 元素是：", secondH2.textContent);
    </script>
  </body>
</html>

运行上面的代码会输出以下信息：

第一个 H2 元素是：First H2
第二个 H2 元素是：Second H2
兼容性

nextElementSibling 属性在所有主流浏览器中都得到了支持，包括 IE9+。

参考链接