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。
