HTML DOM Document getElementsByClassName() 方法

定义和用法

getElementsByClassName() 方法返回拥有指定类名的元素集合。

getElementsByClassName() 方法返回 HTMLCollection。

getElementsByClassName() 属性是只读的。

HTMLCollection

HTMLCollection 是 HTML 元素的类似数组的集合（列表）。

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

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

另请参阅：

getElementById() 方法

getElementsByTagName() 方法

querySelector() 方法

querySelectorAll() 方法

HTMLCollection 对象

实例

例子 1

获取所有带有 class="example" 的元素：

const collection = document.getElementsByClassName("example");

亲自试一试

例子 2

获取同时有 "example" 和 "color" 类的所有元素：

const collection = document.getElementsByClassName("example color");

亲自试一试

例子 3

class="example" 的元素数量：

let numb = document.getElementsByClassName("example").length;

亲自试一试

例子 4

更改 class="example" 的所有元素的背景色：

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

亲自试一试

语法

document.getElementsByClassName(classname)

参数

参数 描述
classname

必需。元素的类名。

可检索由空格分隔的多个类名，例如 "test demo"。

返回值

类型 描述
对象

HTMLCollection 对象。

拥有指定类名的元素的集合。

按照在文档中出现的顺序对元素进行排序。

浏览器支持

document.getElementsByClassName() 是 DOM Level 1 (1998) 特性。

所有浏览器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器

HTML DOM 参考手册：element.getElementsByClassName()

HTML DOM 参考手册：className 属性

HTML DOM 参考手册：classList 属性

HTML DOM 参考手册：Style 对象