目录

DOM HTMLCollection


HTML集合

HTMLCollection 是 HTML 元素的类似数组的集合(列表)。

集合中的元素可以通过索引(从 0 开始)访问。

长度属性返回集合中元素的数量。


HTMLCollection 与 NodeList

HTMLCollection 几乎与节点列表

请参阅下面的描述。



属性和方法

可以在 HTMLCollection 上使用以下属性和方法:

Name Description
length Returns the number of elements in an HTMLCollection
item() Returns the element at a specified index
namedItem() Returns the element with a specified id

示例

示例

获取所有段落:

const elements = document.getElementsByTagName("p");
亲自试一试 »

示例

文档中 <p> 元素的数量为:

const elements = document.getElementsByTagName("p");
let numb = elements.length;
亲自试一试 »

示例

循环 HTMLCollection 中的元素:

const elements = document.getElementsByTagName("*");
for (let i = 0; i < elements.length; i++) {
.. some code ..
}
亲自试一试 »

不是数组

HTMLCollection 不是数组!

HTMLCollection 可能看起来像一个数组,但事实并非如此。

您可以循环遍历 HTMLCollection 并使用索引引用其元素。

但是您不能在 HTMLCollection 上使用像 push()、pop() 或 join() 这样的数组方法。


HTMLCollection 和 NodeList 之间的区别

节点列表HTML集合是非常一样的事情。

两者都是从文档中提取的节点(元素)的类似数组的集合(列表)。可以通过索引号来访问节点。索引从 0 开始。

两者都有一个长度返回列表(集合)中元素数量的属性。

HTMLCollection 是一个集合文档元素

NodeList 是一个集合文档节点(元素节点、属性节点和文本节点)。

HTMLCollection 项目可以通过其名称、ID 或索引号进行访问。

NodeList 项只能通过其索引号来访问。

HTMLCollection 始终是居住收藏。示例:如果将 <li> 元素添加到 DOM 中的列表,则 HTMLCollection 中的列表也会更改。

NodeList 通常是静止的收藏。示例:如果将 <li> 元素添加到 DOM 中的列表中,NodeList 中的列表不会改变。

这个getElementsByClassName()getElementsByTagName()方法返回一个实时 HTMLCollection。

这个querySelectorAll()方法返回一个静态 NodeList。

这个childNodes属性返回一个活动的 NodeList。