在 JavaScript 中，DOM 集合（Collection）是由多个 DOM 元素（节点）组成的对象。它们通常是由查询方法返回的，并允许我们以某种方式访问一组 DOM 元素。集合对象通常是类数组的对象，但与数组不同，它们没有数组的一些方法（如 map、filter 等）。DOM 集合最常见的例子是通过 getElementsByClassName()、getElementsByTagName() 和 querySelectorAll() 等方法返回的。

1. DOM 集合的种类

常见的 DOM 集合类型包括：

• HTMLCollection：一个“活的”集合，即如果 DOM 中的元素发生变化，集合也会自动更新。
• NodeList：类似数组的集合，包含所有符合条件的节点，通常由 querySelectorAll() 返回。它是静态的，也就是说，如果 DOM 中的元素发生变化，NodeList 不会自动更新。

2. HTMLCollection

HTMLCollection 是由 DOM 查询方法（如 getElementsByClassName() 和 getElementsByTagName()）返回的一个集合。它是一个“活的”集合，意味着 DOM 中的元素发生变化时，HTMLCollection 会自动更新。

常用方法：

• length：返回集合中的元素数量。
• item(index)：通过索引获取集合中的元素。

示例：

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

<script>
  const items = document.getElementsByClassName("item");
  console.log(items.length);  // 输出 3

  // 访问第一个元素
  console.log(items[0].innerHTML);  // 输出 "Item 1"

  // 遍历集合
  for (let i = 0; i < items.length; i++) {
    console.log(items[i].innerHTML);
  }
</script>

在这个例子中，items 是一个 HTMLCollection，它包含了所有类名为 "item" 的 div 元素。我们可以使用索引访问每个元素。

3. NodeList

NodeList 是由 querySelectorAll() 和其他一些方法（如 childNodes）返回的集合。与 HTMLCollection 不同，NodeList 是静态的，这意味着它不会随 DOM 更新而自动改变。

常用方法：

• length：返回集合中的节点数量。
• item(index)：通过索引获取集合中的节点。
• forEach()：NodeList 可以使用 forEach() 方法进行遍历（仅在某些情况下有效，特别是 querySelectorAll() 返回的 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 children = document.querySelectorAll(".child");
  console.log(children.length);  // 输出 3

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

在这个例子中，children 是一个 NodeList，它包含了所有类名为 "child" 的 <p> 元素。我们可以使用 forEach() 方法来遍历 NodeList 中的每个元素。

4. NodeList 和 HTMLCollection 的区别

• 更新方式：HTMLCollection 是“活的”，即它会随着 DOM 的变化自动更新；而 NodeList 通常是静态的，除非它是由 querySelectorAll() 方法返回的。
• 遍历方法：HTMLCollection 只能使用传统的 for 循环遍历，不能直接使用 forEach()，但 NodeList （特别是由 querySelectorAll() 返回的）可以使用 forEach() 方法。

5. 转换 HTMLCollection 为数组

虽然 HTMLCollection 和 NodeList 是类数组对象，但它们并不具备数组的方法（如 map、filter）。如果需要使用这些方法，可以将 HTMLCollection 或 NodeList 转换为真正的数组。

示例：

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

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

  // 将 HTMLCollection 转换为数组
  const itemsArray = Array.from(items);

  // 现在可以使用数组方法
  itemsArray.forEach(function(item) {
    console.log(item.innerHTML);  // 输出 "Item 1", "Item 2", "Item 3"
  });
</script>

在这个例子中，Array.from() 方法将 HTMLCollection 转换为数组，然后可以使用数组的 forEach() 方法来遍历每个元素。

6. 总结

• HTMLCollection 和 NodeList 都是由 DOM 方法返回的集合，它们包含多个 DOM 元素或节点。
• HTMLCollection 是一个“活的”集合，会随着 DOM 变化而自动更新；而 NodeList 通常是静态的。
• NodeList 可以使用 forEach() 方法来遍历，而 HTMLCollection 不能直接使用。
• 可以通过 Array.from() 或扩展运算符 ... 将 HTMLCollection 或 NodeList 转换为数组，从而使用数组方法。

通过了解 DOM 集合，我们可以灵活地操作和遍历网页中的元素，提升网页交互性。

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