循环的 HTMLCollection

HTMLCollection 是一个DOM 元素的集合，它是可循环的，可通过for循环访问。

HTMLCollection 中保存着页面元素的动态列表，当文档树修改时，它会动态更新。

如何遍历 HTMLCollection

const collection = document.getElementsByTagName("div");
for (let i = 0; i < collection.length; i++) {
  console.log(collection[i]);
}

HTMLCollection 和 NodeList 的区别

HTMLCollection 和 NodeList 都是 DOM 元素的集合，它们的主要区别在于：

• HTMLCollection 是活性集合，会实时更新，而 NodeList 则是静态集合，它们不会随着文档变化而变化。
• HTMLCollection 中只保存元素节点，而 NodeList 中可以包含元素节点、文本节点、注释等节点。

因此，当我们需要动态更新元素集合时，应该使用 HTMLCollection；而当我们想要在 DOM 树中查找所有匹配节点时，应该选择 NodeList。

举个例子

<div>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>

const collection = document.getElementsByTagName("p");
const _collection = document.querySelectorAll("p");
console.log(collection); // HTMLCollection [HTMLParagraphElement, HTMLParagraphElement]
console.log(_collection); // NodeList [HTMLParagraphElement, HTMLParagraphElement]

上述例子中，HTMLCollection 和 NodeList 都包含两个 <p> 元素，但是 HTMLCollection 中只包含元素节点，而 NodeList 包含了所有类型的节点。

总结

HTMLCollection 是一个具有实时更新功能的元素集合，它可以通过for循环遍历，但是它只包含元素节点，其他节点类型要用 NodeList。在适当的情况下，我们应该选择使用它来遍历和操作元素。