关键要点
- DOM 集合是存储 DOM 节点或元素的列表对象，主要包括 HTMLCollection 和 NodeList。
- HTMLCollection 动态更新，只包含元素节点，支持通过索引和名称访问。
- NodeList 可包含多种节点类型，部分是静态的，部分（如
Node.childNodes）是动态的。 - 研究表明，这两种集合都不是真正的数组，不能直接使用数组方法。
DOM 集合简介
DOM 集合（Collection）是 JavaScript 中用于管理 HTML 文档中多个节点或元素的对象。它允许开发者通过 JavaScript 访问和操作网页中的多个元素，主要有两种类型：HTMLCollection 和 NodeList。
HTMLCollection 详解
HTMLCollection 是动态集合，只包含元素节点（如 <div>、<p>）。它通常由 getElementsByTagName()、getElementsByClassName() 等方法返回。
- 访问方式：通过索引（如
collection[0]）或namedItem()方法（如collection.namedItem("id")）。 - 属性：
length返回元素数量。 - 示例：获取所有
<p>元素：var paragraphs = document.getElementsByTagName("p"); - 注意：不是数组，不能使用
push()、pop()等方法。
NodeList 详解
NodeList 可以包含元素节点、文本节点等，常见于 querySelectorAll() 或 Node.childNodes。
- 动态性：
Node.childNodes是动态的，随 DOM 变化更新；querySelectorAll()返回的 NodeList 是静态的。 - 方法：支持
forEach()等遍历方法。 - 示例：遍历所有 class 为 “highlight” 的元素：
document.querySelectorAll(".highlight").forEach(item => console.log(item));
详细报告
JavaScript HTML DOM 集合（Collection）是现代网页开发中不可或缺的一部分，允许开发者通过 JavaScript 动态操作 HTML 文档中的多个节点或元素。本报告基于多个可靠的中文来源（如 W3School、菜鸟教程、阮一峰的 JavaScript 标准参考教程）提供全面的讲解，涵盖 DOM 集合的基本概念、类型、特点以及实际使用示例。
DOM 集合的基本概念
根据 W3School: JavaScript HTML DOM 集合 和 菜鸟教程: JavaScript HTML DOM 集合，DOM 集合是一种类似数组的对象，用于存储一组 DOM 节点或元素。DOM 集合主要包括两种类型：
- HTMLCollection：主要包含 HTML 元素节点。
- NodeList：可以包含任何类型的节点，包括元素节点、文本节点等。
这些集合通常由 DOM 方法返回，例如 document.getElementsByTagName("p") 返回 HTMLCollection，document.querySelectorAll(".class") 返回 NodeList。研究表明，DOM 集合是动态操作网页内容的关键工具，尤其在需要批量处理元素时。
HTMLCollection 的详细说明
HTMLCollection 是 DOM 集合的一种，主要用于存储 HTML 元素节点。它通常由以下方法返回：
getElementsByTagName()：根据标签名获取元素。getElementsByClassName()：根据类名获取元素。document.links、document.images、document.forms等特殊属性。
特点：
- 内容：只包含元素节点（如
<div>、<p>），不包含文本节点或其他类型节点。 - 访问方式：
- 通过索引访问：
collection[0]获取第一个元素。 - 通过
namedItem()方法使用 id 或 name 属性访问：collection.namedItem("id")。 - 属性：
length：返回集合中元素的数量，用于遍历或检查集合大小。- 动态性：HTMLCollection 是动态集合，随着 DOM 的变化而自动更新。例如，如果你添加或删除一个
<p>元素，document.getElementsByTagName("p")的结果会自动反映这些变化。 - 注意：HTMLCollection 不是真正的数组，因此不能直接使用数组方法如
push()、pop()等。如果需要使用数组方法，可以将集合转换为数组：
var arrayFromCollection = Array.from(paragraphs);示例：
- 获取所有
<p>元素：
var paragraphs = document.getElementsByTagName("p");- 获取
<p>元素的数量：
var count = paragraphs.length;- 遍历所有
<p>元素并修改样式：
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.backgroundColor = "red";
}- 获取第一个
<p>元素：
var firstParagraph = paragraphs[0];根据 阮一峰: JavaScript 标准参考教程（DOM 节点），HTMLCollection 支持 item(index) 和 namedItem(name) 方法，分别用于通过索引和名称访问元素。
NodeList 的详细说明
NodeList 是 DOM 集合的另一种形式，可以包含任何类型的节点（元素节点、文本节点等）。它通常由以下方法返回：
querySelectorAll()：根据 CSS 选择器获取元素。getElementsByName()：根据 name 属性获取元素。Node.childNodes：获取某个节点的所有子节点。
特点：
- 内容：可以包含任何类型的节点，包括元素节点、文本节点等。
- 访问方式：
- 通过索引访问：
list[0]获取第一个节点。 - 属性：
length：返回集合中节点的数量。- 动态性：
- 静态集合：大多数 NodeList（如
querySelectorAll()返回的）是不随 DOM 变化而变化的。例如，即使你添加或删除匹配的元素，querySelectorAll(".class")的结果不会自动更新。 - 动态集合：只有
Node.childNodes是动态的，随着 DOM 的变化而更新。例如：javascript var children = document.body.childNodes; children.length; // 18 document.body.appendChild(document.createElement('p')); children.length; // 19 - 方法：
forEach()：遍历集合中的每个节点（现代浏览器支持）。keys()、values()、entries()：返回 ES6 迭代器，用于遍历键、值或键值对，适合与for...of循环配合使用。
示例：
- 获取所有 class 为 “highlight” 的元素：
var highlights = document.querySelectorAll(".highlight");- 获取所有 name 为 “username” 的元素：
var usernames = document.getElementsByName("username");- 遍历所有匹配的元素：
highlights.forEach(function(item) {
console.log(item);
});根据 JavaScript.info: DOM 导航，NodeList 的 forEach() 方法类似于数组的遍历方法，适合处理集合中的每个节点。
HTMLCollection vs NodeList 的对比
以下表格总结了两者的主要区别：
| 特性 | HTMLCollection | NodeList |
|---|---|---|
| 内容 | 只包含元素节点 | 可包含任何类型节点（如文本节点） |
| 动态性 | 总是动态，随 DOM 变化更新 | 部分动态（如 Node.childNodes），部分静态（如 querySelectorAll()） |
| 访问方法 | 索引、namedItem() | 索引 |
| 支持方法 | item()、namedItem() | forEach()、keys() 等 |
| 示例方法 | getElementsByTagName() | querySelectorAll() |
使用注意事项
- 性能考虑：对于大型集合，遍历操作可能较慢，因此在实际开发中应注意性能优化。例如，尽量避免在循环中频繁访问
length属性。 - 浏览器兼容性：
forEach()方法在现代浏览器中支持良好，但旧版浏览器可能需要降级处理（如使用传统for循环）。 - 内存管理：动态集合（如 HTMLCollection 和
Node.childNodes）会随 DOM 变化而更新，可能会影响性能，特别是在复杂页面中。
实际应用与示例
DOM 集合在实际开发中非常常见，例如：
- 批量修改样式：遍历所有
<p>元素，统一设置背景色。 - 表单处理：获取所有表单输入元素，验证其值。
- 动态更新：通过
Node.childNodes实时监控子节点的变化。
根据 Axihe: JavaScript DOM 集合，以下是遍历 HTMLCollection 的示例：
var myCollection = document.getElementsByTagName("p");
for (var i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}总结
JavaScript HTML DOM 集合（Collection）是创建交互式网页的关键机制，主要包括 HTMLCollection 和 NodeList。HTMLCollection 是动态的，只包含元素节点，支持通过索引和名称访问；NodeList 可以包含多种节点类型，部分是静态的，部分是动态的。通过理解和使用 DOM 集合，开发者可以更有效地操作和查询网页中的元素。