ThatManK Mobile Article

获取子节点

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <div>我是div</div>

    <span>我是span</span>

    <ul>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
    </ul>

    <ol>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
      <li>我是li</li>
    </ol>

    <div class="demo">
      <div class="box">
        <span class="erweima">×</span>
      </div>
    </div>

    <script>
      // 之前 DOM 提供的方法(API)获取
      var ul = document.querySelector("ul");
      var lis = ul.querySelectorAll("li");

      // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
      console.log(ul.childNodes); // 有9个节点, 其中5个换行, 就是文本节点
      console.log(ul.childNodes[0].nodeType); // 3
      console.log(ul.childNodes[1].nodeType); // 1

      // 2. children 获取所有的子元素节点 也是我们实际开发常用的
      console.log(ul.children); // [li, li, li, li]
    </script>
  </body>
</html>