HTMLCollection 和 NodeList: 了解 DOM 的集合

[chencl1986]

HTMLCollection 和 NodeList: 了解 DOM 的集合

在 Web 开发中，我们经常需要处理 DOM 元素的集合。HTMLCollection 和 NodeList 是两种常见的集合类型，它们都用于表示 DOM 元素的集合。尽管它们在某些方面相似，但它们有一些关键的区别。本文将深入探讨这两种集合类型，以及与之相关的 "live" 和 "static" 的概念。

1. HTMLCollection 和 NodeList

HTMLCollection 和 NodeList 都是集合类型，用于表示 DOM 元素的集合。但它们是由不同的 API 方法返回的，并且有一些不同的特性。

• HTMLCollection: 它是一个 live 集合，这意味着它会自动更新以反映其所代表的底层文档结构的当前状态。例如，如果我们从文档中删除了一个元素，它会自动从与之相关的 HTMLCollection 中移除。

• NodeList: 它可以是 live 的，也可以是 static 的，具体取决于如何获取它。例如，通过 element.childNodes 获取的 NodeList 是 live 的，而通过 document.querySelectorAll 获取的 NodeList 是 static 的。

2. Live vs Static

"Live" 和 "Static" 是描述集合是否会自动更新以反映其底层文档结构的术语。

• Live: 如果集合是 live 的，那么它会随着底层文档结构的变化而自动更新。例如，如果你从文档中删除一个元素，它会自动从 live 的 NodeList 或 HTMLCollection 中移除。

• Static: 如果集合是 static 的，那么它不会随着底层文档结构的变化而更新。它是在某个特定时刻捕获的文档的快照。

3. 相关API

以下是返回 HTMLCollection 的常见 DOM API：

• document.forms: 获取文档中的所有 <form> 元素。
• document.images: 获取文档中的所有 <img> 元素。
• document.links: 获取文档中的所有带有 href 属性的 <a> 和 <area> 元素。
• document.scripts: 获取文档中的所有 <script> 元素。
• element.children: 获取元素的子元素。
• element.getElementsByTagName(tagName): 获取元素下具有指定标签名的所有元素。

以下是返回 NodeList 的常见 DOM API：

• document.querySelectorAll(selector): 返回一个 static NodeList，包含匹配给定选择器的所有元素。
• element.childNodes: 返回一个 live NodeList，包含元素的所有子节点。
• document.getElementsByName(name): 返回一个 live NodeList，包含具有指定 name 属性的所有元素。
• element.querySelectorAll(selector): 同 document.querySelectorAll，但是只在指定元素的后代中查找。

结论:

理解 HTMLCollection 和 NodeList 以及它们之间的差异是 Web 开发中的一个重要概念。这不仅有助于我们更有效地操作 DOM，而且还能确保我们的代码更加健壮和可维护。