HTMLCollection与NodeList有什么区别，以及如何获取它们

在Web开发中，HTMLCollection 和 NodeList 是常见的DOM对象集合，用来存储多个DOM元素。虽然它们看似相似，但在行为和特性上有一些显著的区别。理解这些差异对于高效操作DOM元素至关重要。

1. HTMLCollection

HTMLCollection 是一种实时更新的集合。当DOM结构发生变化时，HTMLCollection会自动反映出这些变化。它仅包含元素节点，因此不会存储文本节点或注释节点等其它类型的节点。

特点

• 实时更新：当DOM结构变化时，HTMLCollection自动更新。
• 访问方式多样：可以通过索引、length属性，或元素的id或name属性来访问其中的元素。
• 仅包含元素节点：忽略文本节点和注释节点。

获取方式

• document.getElementsByTagName(tagName)：通过标签名获取元素集合。
• document.getElementsByClassName(className)：通过类名获取元素集合。
• document.forms、document.images、document.links：也会返回HTMLCollection。

1
const divs = document.getElementsByTagName("div"); // 返回 HTMLCollection

2. NodeList

NodeList 是一个包含所有类型节点（元素节点、文本节点、注释节点等）的集合。它可以是静态的（即不随DOM变化更新），也可以是实时的，取决于获取它的方式。

特点

• 非实时更新：通过querySelectorAll获取的NodeList是静态的，不会自动更新。
• 包含所有类型的节点：除了元素节点，它还能存储文本节点、注释节点等。
• 支持多种遍历方式：可以通过forEach()遍历NodeList（现代浏览器支持）。

获取方式

• document.querySelectorAll(selector)：返回静态的NodeList。
• document.childNodes：返回包含所有子节点（元素、文本、注释等）的实时NodeList。
• parentNode.childNodes：获取某个节点的所有子节点，返回NodeList。

1
const divs = document.querySelectorAll("div"); // 返回静态的 NodeList

主要区别总结

1. 类型差异：

   • HTMLCollection 只包含元素节点。
   • NodeList 可以包含所有类型的节点（元素、文本、注释等）。

2. 实时性：

   • HTMLCollection 是实时更新的。
   • NodeList 通过 querySelectorAll() 获取时是静态的，而 childNodes 获取时是实时的。

3. 遍历方式：

   • HTMLCollection 可以通过索引访问元素，但不支持 forEach()。
   • NodeList 支持 forEach() 进行遍历，且使用灵活。

选择建议

• 当需要操作动态DOM结构时，选择 HTMLCollection 更合适，因为它会随着DOM的变化自动更新。
• 如果只是需要一次性的静态元素集合，NodeList 是更好的选择，特别是通过 querySelectorAll() 获取的静态 NodeList。

代码示例

1
// 获取 HTMLCollection
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // 实时更新的集合
4

5
// 获取 NodeList
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // 静态的集合
8

9
// 遍历 NodeList
10
nodeList.forEach((element) => {
11
  console.log(element);
12
});

通过理解HTMLCollection与NodeList的区别，开发者可以更灵活地操作DOM，提高代码的性能与可维护性。