子节点

  • obj.childNodes：获取的子节点中是所有的结点，包括text类型的文本即文本结点。

  • obj.children：获取只包含元素节点。获取所有的孩子（适用于IE9及以上）

    1. <body>
    2.   <ul>
    3.       <li>我是第1个li</li>
    4.       <li>我是第2个li</li>
    5.       <li>我是第3个li</li>
    6.       <li>我是第4个li</li>
    7.       <li>我是第5个li</li>
    8.   </ul>
    9. </body>
    10. <script>
    11.   let ul = document.querySelector("ul");
    13.   console.log(ul.childNodes);
    14.   console.log(ul.children);
    15. </script>

    image.png

兄弟节点

  • obj.nextSibling:获取obj的下一个节点，包含各种节点，不仅仅是元素节点。

  • obj.nextElementSibling:获取obj的下一个元素节点。

  • obj.previousSibling:返回上一个兄弟节点。

  • obj.previousElementSibling:返回上一个兄弟元素节点。

    <body>
  <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
  </ul>
</body>
<script>
  let ul = document.querySelector("ul");

      //获取第2个li的下一个兄弟节点
  console.log(ul.children[1].nextSibling);
  console.log(ul.children[1].nextElementSibling);
</script>