HTMLCollection 与 NodeList：动态集合与静态集合的区别

好的，各位亲爱的码农朋友们，欢迎来到今天的“HTMLCollection与NodeList：动态与静态的爱恨情仇”讲座！我是你们的老朋友，bug终结者，代码诗人，今天就让我们一起揭开这两个看似相似，实则性格迥异的“集合”的神秘面纱。

准备好了吗？系好安全带，我们要发车啦！🚀

第一章：集合，你别跑！—— 什么是HTMLCollection和NodeList？

首先，咱们得搞清楚，这两个“集合”到底是什么玩意儿。简单来说，它们都是用来存放HTML元素的“容器”，让你能方便地访问和操作页面上的各种元素。

想象一下，你是一个勤劳的园丁，你的花园里种满了各种花花草草（HTML元素）。HTMLCollection和NodeList就像是你用来整理这些花草的两种不同的工具：

HTMLCollection： 就像一个魔法花篮，它只会收集特定类型的“花”（HTML元素），比如所有的<a>标签，或者所有的<img>标签。而且，这个花篮是动态的，只要花园里的“花”发生了变化，花篮里的内容也会自动更新。
NodeList： 就像一个普通的工具箱，它可以装各种各样的东西（HTML元素、文本节点、注释节点等等）。这个工具箱可以是动态的，也可以是静态的，取决于你使用的方式。

举个栗子：

假设我们有以下HTML代码：

<div id="container">
  <p class="paragraph">This is the first paragraph.</p>
  <p class="paragraph">This is the second paragraph.</p>
  <p class="paragraph">This is the third paragraph.</p>
</div>

我们可以通过以下方式获取HTMLCollection和NodeList：

// 获取所有 class 为 "paragraph" 的元素，返回一个 HTMLCollection
const paragraphsCollection = document.getElementsByClassName("paragraph");

// 获取 container 元素下的所有子节点，返回一个 NodeList
const containerNodeList = document.getElementById("container").childNodes;

总结一下：

特性	HTMLCollection	NodeList
包含元素类型	只能包含HTML元素	可以包含各种类型的节点（元素、文本、注释等）
动态性	通常是动态的	可以是动态的，也可以是静态的
获取方式	`getElementsByTagName()`, `getElementsByClassName()`, `document.images`, `document.forms` 等	`childNodes`, `querySelectorAll()` 等
访问方式	可以通过索引或`name`属性访问元素	只能通过索引访问元素

第二章：动态与静态的纠葛 —— 它们到底有什么区别？

重头戏来了！HTMLCollection和NodeList最大的区别就在于它们的动态性。

2.1 动态集合：实时更新的“魔法花篮”

动态集合，顾名思义，就是会随着文档的改变而自动更新的集合。就像一个拥有“魔法”的花篮，只要花园里的花发生了变化，花篮里的花也会跟着变化。

举个例子：

<div id="container">
  <p class="paragraph">This is the first paragraph.</p>
</div>

<script>
  const paragraphsCollection = document.getElementsByClassName("paragraph");
  console.log("初始长度:", paragraphsCollection.length); // 输出 1

  const newParagraph = document.createElement("p");
  newParagraph.className = "paragraph";
  newParagraph.textContent = "This is the second paragraph.";
  document.getElementById("container").appendChild(newParagraph);

  console.log("添加新段落后的长度:", paragraphsCollection.length); // 输出 2
</script>

在这个例子中，我们首先通过getElementsByClassName()获取了一个包含所有class为"paragraph"的元素的HTMLCollection。一开始，只有一个段落，所以paragraphsCollection.length是1。

然后，我们动态地添加了一个新的段落。神奇的事情发生了！paragraphsCollection.length自动变成了2，而我们并没有手动更新它。这就是动态集合的魅力！✨

2.2 静态集合：凝固时光的“琥珀”

静态集合，则像一个被封存在琥珀中的集合，它在创建的那一刻就固定了，不会随着文档的改变而改变。就像你把花园里的花摘下来，放进一个工具箱里，即使花园里的花再怎么变化，工具箱里的花也不会改变。

举个例子：

<div id="container">
  <p class="paragraph">This is the first paragraph.</p>
</div>

<script>
  const containerNodeList = document.getElementById("container").querySelectorAll(".paragraph");
  console.log("初始长度:", containerNodeList.length); // 输出 1

  const newParagraph = document.createElement("p");
  newParagraph.className = "paragraph";
  newParagraph.textContent = "This is the second paragraph.";
  document.getElementById("container").appendChild(newParagraph);

  console.log("添加新段落后的长度:", containerNodeList.length); // 输出 1
</script>

在这个例子中，我们使用querySelectorAll()方法获取了一个包含所有class为"paragraph"的元素的NodeList。一开始，只有一个段落，所以containerNodeList.length是1。

然后，我们动态地添加了一个新的段落。但是，containerNodeList.length仍然是1，并没有发生变化。这就是静态集合的特点！ 🕰️

2.3 如何区分动态和静态NodeList？

那么，如何区分一个NodeList是动态的还是静态的呢？很简单，看它是怎么来的！

动态NodeList： 通常由childNodes属性返回。
静态NodeList： 通常由querySelectorAll()方法返回。

总结一下：

特性	动态集合 (HTMLCollection, 某些NodeList)	静态集合 (某些NodeList)
实时更新	是	否
适用场景	需要实时反映文档变化的场景	需要固定集合内容的场景

第三章：实战演练 —— 如何正确使用它们？

了解了HTMLCollection和NodeList的特性之后，我们就可以在实际开发中更加灵活地使用它们了。

3.1 动态集合的妙用

动态集合非常适合那些需要实时反映文档变化的场景。比如，你需要监听某个元素下所有子元素的数量变化，或者你需要实时更新一个列表的内容。

举个栗子：

假设我们需要实现一个简单的计数器，用来显示某个容器下有多少个段落：

<div id="container">
  <p class="paragraph">This is the first paragraph.</p>
</div>

<p>段落数量：<span id="count"></span></p>

<button id="add">添加段落</button>

<script>
  const container = document.getElementById("container");
  const countElement = document.getElementById("count");
  const addButton = document.getElementById("add");

  // 获取动态的 HTMLCollection
  const paragraphsCollection = container.getElementsByClassName("paragraph");

  // 更新计数器
  function updateCount() {
    countElement.textContent = paragraphsCollection.length;
  }

  // 初始化计数器
  updateCount();

  // 添加段落的事件监听器
  addButton.addEventListener("click", () => {
    const newParagraph = document.createElement("p");
    newParagraph.className = "paragraph";
    newParagraph.textContent = "This is a new paragraph.";
    container.appendChild(newParagraph);

    // 动态集合会自动更新，所以不需要手动更新
    updateCount();
  });
</script>

在这个例子中，我们使用了动态的paragraphsCollection来实时获取段落的数量，只要容器中的段落发生了变化，计数器就会自动更新。

3.2 静态集合的优势

静态集合则更适合那些需要固定集合内容的场景。比如，你需要遍历一个集合，并在遍历的过程中修改集合中的元素，或者你需要对一个集合进行排序。

举个栗子：

假设我们需要给一个列表中的所有链接添加一个target="_blank"属性：

<ul>
  <li><a href="https://www.example.com">Example 1</a></li>
  <li><a href="https://www.example.com">Example 2</a></li>
  <li><a href="https://www.example.com">Example 3</a></li>
</ul>

<script>
  const links = document.querySelectorAll("a");

  // 将 NodeList 转换为数组，避免在循环中修改 NodeList 导致的问题
  const linksArray = Array.from(links);

  linksArray.forEach(link => {
    link.setAttribute("target", "_blank");
  });
</script>

在这个例子中，我们使用了静态的querySelectorAll()来获取所有的链接。由于我们需要在循环中修改链接的属性，所以我们首先将NodeList转换成数组，避免在循环中修改NodeList导致的问题。

注意：

在遍历动态集合的时候，一定要小心！因为集合会随着你的操作而变化，可能会导致一些意想不到的结果。

举个反例：

<div id="container">
  <p class="paragraph">This is the first paragraph.</p>
  <p class="paragraph">This is the second paragraph.</p>
  <p class="paragraph">This is the third paragraph.</p>
</div>

<script>
  const container = document.getElementById("container");
  const paragraphsCollection = container.getElementsByClassName("paragraph");

  // 错误的做法：在循环中删除元素
  for (let i = 0; i < paragraphsCollection.length; i++) {
    container.removeChild(paragraphsCollection[i]); // 💥 可能会导致无限循环
  }
</script>

在这个例子中，我们在循环中删除了段落。由于paragraphsCollection是动态的，每次删除一个段落后，paragraphsCollection.length都会减小，导致循环条件永远满足，最终导致无限循环。

正确的做法是：

倒序循环：

for (let i = paragraphsCollection.length - 1; i >= 0; i--) {
  container.removeChild(paragraphsCollection[i]);
}

转换成数组：

const paragraphsArray = Array.from(paragraphsCollection);
paragraphsArray.forEach(paragraph => {
  container.removeChild(paragraph);
});

第四章：性能优化 —— 如何让你的代码飞起来？

在处理大量的HTML元素时，性能就显得尤为重要。选择合适的集合类型，可以有效地提高代码的执行效率。

4.1 避免不必要的DOM操作

DOM操作是JavaScript中最耗时的操作之一。因此，我们应该尽量避免不必要的DOM操作。

举个例子：

如果你需要多次访问同一个HTMLCollection或NodeList，最好将其缓存起来，避免每次都重新获取。

// 不好的做法：每次都重新获取 HTMLCollection
for (let i = 0; i < document.getElementsByClassName("paragraph").length; i++) {
  // ...
}

// 好的做法：缓存 HTMLCollection
const paragraphsCollection = document.getElementsByClassName("paragraph");
for (let i = 0; i < paragraphsCollection.length; i++) {
  // ...
}

4.2 选择合适的集合类型

在选择集合类型时，应该根据实际的需求来选择。

如果需要实时反映文档变化，就选择动态集合。
如果只需要固定集合内容，就选择静态集合。

一般来说，querySelectorAll() 的性能比 getElementsByClassName() 和 getElementsByTagName() 更好，因为它只需要执行一次查询，而 getElementsByClassName() 和 getElementsByTagName() 需要实时更新集合。

4.3 使用DocumentFragment

如果你需要批量添加或删除HTML元素，可以使用DocumentFragment来提高性能。

DocumentFragment是一个轻量级的DOM节点，它可以容纳多个子节点，但不会被添加到文档树中。我们可以先将所有的子节点添加到DocumentFragment中，然后再将DocumentFragment添加到文档树中，这样就可以减少DOM操作的次数。

举个例子：

<ul id="list"></ul>

<script>
  const list = document.getElementById("list");
  const fragment = document.createDocumentFragment();

  for (let i = 0; i < 1000; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + i;
    fragment.appendChild(li);
  }

  list.appendChild(fragment);
</script>

在这个例子中，我们首先创建了一个DocumentFragment，然后将所有的<li>元素添加到DocumentFragment中，最后将DocumentFragment添加到<ul>元素中。这样就可以减少DOM操作的次数，提高性能。

第五章：总结与展望

今天，我们一起深入探讨了HTMLCollection和NodeList的区别，以及如何在实际开发中正确使用它们。

记住以下几点：

HTMLCollection只能包含HTML元素，NodeList可以包含各种类型的节点。
HTMLCollection通常是动态的，NodeList可以是动态的，也可以是静态的。
动态集合适合需要实时反映文档变化的场景，静态集合适合需要固定集合内容的场景。
在遍历动态集合的时候，一定要小心！
选择合适的集合类型，可以有效地提高代码的执行效率。

希望今天的讲座能帮助大家更好地理解HTMLCollection和NodeList，并在实际开发中更加游刃有余！

最后，送给大家一句话：

代码的世界，没有绝对的对与错，只有适合与不适合。

感谢大家的聆听！我们下期再见！👋

发表回复 取消回复

发表回复取消回复