节点 - 获取兄弟节点 - 《JavaScript》

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>兄弟节点</title>
  </head>
  <body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <script>
      const p = document.querySelector('p')
      /*
       * 下一个兄弟节点
       * 包含元素节点和文本节点
       * 找不到返回 null
       */
      console.log('下一个同级节点：', p.nextSibling) // 换行也算一个节点（文本节点）
      /*
       * 上一个兄弟节点
       * 包含元素节点和文本节点
       * 找不到返回 null
       */
      console.log('上一个同级节点：', p.previousSibling) // 换行也算一个节点（文本节点）
      // IE 9 以上支持
      console.log(p.nextElementSibling); // 下一个同级元素节点，找不到返回 null
      console.log(p.previousElementSibling); // 上一个同级元素节点，找不到返回 null
    </script>
  </body>
</html>