HTMLCollection 对象

最新推荐文章于 2025-12-07 17:05:22 发布

原创最新推荐文章于 2025-12-07 17:05:22 发布 · 337 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

HTMLCollection 对象

HTMLCollection 对象是 DOM（文档对象模型）中的一个重要组成部分，用于表示一组 HTML 元素。它通常在查询 DOM 时使用，如通过 document.getElementsByTagName() 或 document.getElementsByClassName() 方法返回的结果。本文将详细介绍 HTMLCollection 对象的相关知识，包括其创建、属性、方法以及应用场景。

创建 HTMLCollection 对象

HTMLCollection 对象通常通过以下几种方式创建：

使用 document.getElementsByTagName() 方法：

var elements = document.getElementsByTagName("div");

上述代码将获取页面中所有 <div> 元素，并将它们封装在 HTMLCollection 对象 elements 中。

使用 document.getElementsByClassName() 方法：

var elements = document.getElementsByClassName("class-name");

上述代码将获取页面中所有具有指定类名的 <div> 元素，并将它们封装在 HTMLCollection 对象 elements 中。

使用 document.getElementsByName() 方法：

var elements = document.getElementsByName("input-name");

上述代码将获取页面中所有具有指定名称的 <input> 元素，并将它们封装在 HTMLCollection 对象 elements 中。

HTMLCollection 对象属性

HTMLCollection 对象具有以下属性：

length：表示集合中元素的个数。
item(index)：返回指定索引处的元素。如果没有指定索引，则返回第一个元素。

HTMLCollection 对象方法

HTMLCollection 对象支持以下方法：

item(index)：与属性相同，返回指定索引处的元素。
forEach(function(element, index, array), thisValue)：对集合中的每个元素执行一次提供的函数。
filter(function(element), thisValue)：返回一个包含通过测试的所有元素的新的 HTMLCollection 对象。

应用场景

HTMLCollection 对象在以下场景中非常有用：

获取一组元素并对其进行操作，如修改样式、添加事件监听器等。
对一组元素进行遍历，如统计元素数量、查找特定元素等。
使用 forEach 方法简化循环操作。

示例

以下是一个使用 HTMLCollection 对象的示例：

// 获取所有 <div> 元素
var divs = document.getElementsByTagName("div");

// 遍历所有 <div> 元素并修改其背景颜色
divs.forEach(function(div) {
  div.style.backgroundColor = "red";
});

// 获取索引为 2 的 <div> 元素
var thirdDiv = divs.item(2);
thirdDiv.style.color = "white";

// 使用 filter 方法筛选出具有特定类名的 <div> 元素
var filteredDivs = divs.filter(function(div) {
  return div.classList.contains("class-name");
});