在 JavaScript 中，节点列表（NodeList）是一个类数组对象，包含了与查询条件匹配的所有节点。它可以由多种方法返回，例如 getElementsByTagName()、querySelectorAll()、childNodes 等。节点列表用于表示 DOM 树中的节点集合，通常包含多个元素节点、文本节点或其他类型的节点。

1. NodeList 概述

• NodeList 是一个类数组对象，代表 DOM 树中的一组节点。它并不像数组那样直接具备数组的所有方法（如 map、reduce 等），但可以使用 length 属性来获取节点的数量，并使用 item(index) 方法通过索引访问节点。
• NodeList 可以是动态的或静态的，具体取决于返回它的方法。

2. NodeList 的常见来源

childNodes 属性

• childNodes 返回一个 NodeList，包含了当前节点的所有子节点（包括元素节点、文本节点和注释节点）。

querySelectorAll() 方法

• querySelectorAll() 返回一个静态的 NodeList，它包含了所有与指定 CSS 选择器匹配的节点。它不会自动更新，当 DOM 树变化时，返回的 NodeList 不会发生变化。

getElementsByTagName() 方法

• getElementsByTagName() 返回一个动态的 NodeList，包含文档或某个元素内的所有具有指定标签名的子元素。它是“活的”，即 DOM 发生变化时，NodeList 会自动更新。

getElementsByClassName() 方法

• getElementsByClassName() 返回一个动态的 NodeList，包含所有具有指定类名的元素节点。

3. NodeList 与 HTMLCollection 的区别

• HTMLCollection 是一个“活的”集合，它会随着 DOM 的变化而自动更新。返回该集合的方法包括 getElementsByClassName() 和 getElementsByTagName()。
• NodeList 是一个类数组的集合，通常通过 querySelectorAll() 等方法返回。它可以是静态的，也可以是动态的，具体取决于返回它的方法。

4. NodeList 属性与方法

• length：返回节点列表中的节点数。
• item(index)：返回指定索引位置的节点。
• forEach()：对于由 querySelectorAll() 返回的 NodeList，可以使用 forEach() 方法来遍历每个节点。

示例：使用 NodeList

<div id="parent">
  <p class="child">Child 1</p>
  <p class="child">Child 2</p>
  <p class="child">Child 3</p>
</div>

<script>
  const parent = document.getElementById("parent");

  // 获取所有子节点（包括文本节点、元素节点等）
  const nodeList = parent.childNodes;

  console.log(nodeList.length);  // 输出 5（包含文本节点和元素节点）

  // 使用 item() 获取指定索引的节点
  console.log(nodeList.item(0)); // 输出父元素之前的空白文本节点
  console.log(nodeList.item(1)); // 输出第一个 <p> 元素节点
</script>

示例：使用 querySelectorAll() 获取 NodeList

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

<script>
  const items = document.querySelectorAll(".item"); // 返回一个 NodeList

  console.log(items.length);  // 输出 3

  // 使用 forEach 遍历 NodeList
  items.forEach(function(item) {
    console.log(item.innerHTML); // 输出 "Item 1", "Item 2", "Item 3"
  });
</script>

5. 动态与静态的 NodeList

• 动态 NodeList：例如通过 getElementsByTagName() 或 getElementsByClassName() 返回的节点列表。如果 DOM 发生更改（如添加或删除节点），这些节点列表会立即更新。

  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>

  <script>
    const items = document.getElementsByClassName("item");

    // 动态更新 NodeList
    console.log(items.length);  // 输出 3

    // 动态更改 DOM
    const newItem = document.createElement("div");
    newItem.className = "item";
    newItem.textContent = "Item 4";
    document.body.appendChild(newItem);

    console.log(items.length);  // 输出 4（NodeList 动态更新）
  </script>

• 静态 NodeList：例如通过 querySelectorAll() 返回的节点列表。它不会随着 DOM 更改而自动更新。

  <div class="item">Item 1</div>
  <div class="item">Item 2</div>

  <script>
    const items = document.querySelectorAll(".item");

    console.log(items.length);  // 输出 2

    // 动态更改 DOM
    const newItem = document.createElement("div");
    newItem.className = "item";
    newItem.textContent = "Item 3";
    document.body.appendChild(newItem);

    console.log(items.length);  // 仍然输出 2（NodeList 不更新）
  </script>

6. 遍历 NodeList

由于 NodeList 是类数组的对象，我们通常会用循环或 forEach() 来遍历节点：

• 使用 for 循环遍历 NodeList：

  const nodeList = document.querySelectorAll(".item");
  for (let i = 0; i < nodeList.length; i++) {
    console.log(nodeList[i].innerHTML);
  }

• 使用 forEach() 遍历 NodeList：

  const nodeList = document.querySelectorAll(".item");
  nodeList.forEach(function(item) {
    console.log(item.innerHTML);
  });

7. 总结

• NodeList 是一个类数组对象，通常通过 DOM 查询方法（如 querySelectorAll()、childNodes 等）获取。
• 它可以是静态的（如 querySelectorAll()）或动态的（如 getElementsByTagName()）。
• NodeList 提供了基本的属性（如 length）和方法（如 item() 和 forEach()）来操作节点集合。
• NodeList 是遍历 DOM 节点的重要工具，可以与数组类似的方式操作 DOM 中的元素或节点集合。

通过理解和掌握 NodeList，你可以更高效地处理和操作 HTML 页面中的多个节点。

更多详细内容请关注其他相关文章。