DOM HTMLCollection
HTMLCollection
HTMLCollection 是一个类似数组的 HTML 元素集合（列表）。
集合中的元素可以通过索引访问（从 0 开始）。
length 属性 返回集合中元素的数量。
HTMLCollection 与 NodeList
HTMLCollection 几乎与 NodeList 相同。
请参阅下面的说明。
属性和方法
以下属性和方法可用于 HTMLCollection
| 名称 | 描述 |
|---|---|
| length | 返回 HTMLCollection 中元素的数量 |
| item() | 返回指定索引处的元素 |
| namedItem() | 返回具有指定 ID 的元素 |
示例
示例
文档中 <p> 元素的数量为
const elements = document.getElementsByTagName("p");
let numb = elements.length;
亲自试一试 »
示例
循环遍历 HTMLCollection 中的元素
const elements = document.getElementsByTagName("*");
for (let i = 0; i < elements.length; i++) {
.. 一些代码 ..
}
亲自试一试 »
不是数组
HTMLCollection 不是数组！
HTMLCollection 看起来可能像一个数组，但它不是。
您可以遍历 HTMLCollection 并使用索引引用其元素。
但是您不能在 HTMLCollection 上使用 push()、pop() 或 join() 等数组方法。
HTMLCollection 与 NodeList 之间的区别
NodeList 和 HTMLcollection 非常相似。
两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。节点可以通过索引号访问。索引从 0 开始。
两者都有一个 length 属性，它返回列表（集合）中元素的数量。
HTMLCollection 是 文档元素 的集合。
NodeList 是 文档节点（元素节点、属性节点和文本节点）的集合。
HTMLCollection 项目可以通过其名称、ID 或索引号访问。
NodeList 项目只能通过其索引号访问。
HTMLCollection 始终是 实时 集合。例如：如果在 DOM 中向列表添加 <li> 元素，则 HTMLCollection 中的列表也会发生更改。
NodeList 最常见的是 静态 集合。例如：如果在 DOM 中向列表添加 <li> 元素，则 NodeList 中的列表不会发生更改。
getElementsByClassName() 和 getElementsByTagName() 方法返回实时 HTMLCollection。
querySelectorAll() 方法返回静态 NodeList。
childNodes 属性返回实时 NodeList。
