DOM（文档对象模型）集合是一种将相关的 HTML 元素分组在一起的方式。它们是只读的，并且可以通过 DOM 对象（如文档对象或 DOM 节点）的属性来访问。
DOM 集合有许多不同种类，包括：
-
HTMLCollection 对象是一个类似数组的 HTML 元素列表。
-
NodeList 对象是从文档中提取的一系列节点的列表。
-
HTML DOM 中的表单元素集合用于设置或返回表单元素内的所有
<input> 元素集合。
-
HTML DOM 表单集合用于返回 HTML 文档中存在的所有表单元素集合。
DOM 集合可以用来完成各种任务，例如：
本教程提供了对 DOM 集合的基本理解，特别是 HTMLCollection 对象。其他类型的 DOM 集合将在后续章节中讨论。
HTMLCollection 对象
HTMLCollection 对象是一种类似数组的数据结构的 HTML 元素。当你使用 getElementsByTagName() 方法来访问 DOM 元素时，它会返回一个 HTMLCollection 对象。
它与数组相似但不是数组。你可以遍历 HTML 集合并通过索引来访问每个 HTML 元素，但是你不能使用如 pop() 或 push() 等方法与 HTML 集合一起使用。
以下方法和属性会返回 HTML 集合：
-
getElementsByTagName() 方法
-
getElementsByClassName() 方法
-
HTMLCollection 对象的属性和方法
以下是可以在 HTML 集合中使用的属性和方法列表：
| 方法/属性 |
描述 |
length |
获取集合中的 HTML 元素数量。 |
item() |
从特定索引获取元素。 |
namedItem() |
使用其 ID 从给定集合中获取 HTML 元素。 |
示例：遍历集合元素
在下面的代码中，我们添加了一串数字的列表。
在 JavaScript 中，我们使用 getElementsByTagName() 方法来访问所有的 <li> 元素，这返回了一个 HTML 集合。
之后，我们使用 for...of 循环来遍历每一个 HTML 元素。集合包含每一个 HTML 元素的对象格式。我们使用 innerHTML 属性与集合中的每一个元素一起工作以获取其 HTML 并将其打印在网页上。
<DOCTYPE html>
<html>
<body>
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
<div id="output"></div>
<script>
const output = document.getElementById('output');
let lists = document.getElementsByTagName('li');
for (let list of lists) {
output.innerHTML += "inner HTML - " + list.innerHTML + "<br>";
}
</script>
</body>
</html>
示例：获取集合长度
在下面的代码中，我们使用集合的 length 属性来获取集合中的元素数量。
<DOCTYPE html>
<html>
<body>
<div class="text"> JavaScript </div>
<div class="text"> HTML </div>
<div class="text"> CSS </div>
<div class="text"> CPP </div>
<div id="output">The length of the collection is: </div>
<script>
const divs = document.getElementsByClassName('text');
document.getElementById('output').innerHTML += " " + divs.length;
</script>
</body>
</html>
示例：使用集合的 namedItem 方法
在下面的代码中，我们使用 getElementsByClassName() 方法来访问所有的 <div> 元素，返回 <div> 元素的集合。
之后，我们使用 namedItem() 方法来访问具有等于 JavaScript 的 ID 的 <div> 元素。
<DOCTYPE html>
<html>
<body>
<div class="text" id="JavaScript"> JavaScript </div>
<div class="text" id="PHP"> PHP </div>
<div class="text" id="Python"> Python </div>
<div class="text" id="Java"> Java </div>
<div id="output">The Element having id equal to JavaScript is: </div>
<script>
const output = document.getElementById('output');
const langs = document.getElementsByClassName('text');
output.innerHTML += langs.namedItem('JavaScript').innerHTML;
</script>
</body>
</html>
文档对象和 DOM 元素的集合
文档对象包含一些内置集合来从文档中获取元素。
在下表中，我们列出了所有可以通过文档对象访问的集合。
| 集合名称 |
描述 |
document.links |
获取文档中的所有 <a> 元素。 |
document.forms |
获取文档中的所有 <form> 元素。 |
document.images |
获取文档中的所有 <img> 元素。 |
document.scripts |
获取文档中的所有 <script> 元素。 |
document.styleSheets |
获取文档中的所有 <link> 和 <style> 元素。 |
Element.children |
获取特定 HTML 元素的所有子元素的集合。 |
element.attributes |
获取给定元素的所有属性的集合。 |
element.options |
获取文档中的所有 <option> 元素。 |
element.classList |
获取特定 DOM 元素的类名集合。 |