HTML DOM Element getElementsByClassName() 方法

定义和用法

getElementsByClassName() 方法返回拥有给定类名的子元素的集合，以 NodeList 对象。

另请参阅：

classList 属性

className 属性

querySelector() 方法

querySelectorAll() 方法

getElementsByTagName() 方法

HTML DOM Style 对象

教程：

CSS 语法

CSS 选择器

CSS 选择器参考手册

NodeList

NodeList 是类似数组的节点集合（列表）。

您可通过索引（下标）访问列表中的节点。索引从 0 开始。

length 属性返回列表中的节点数。

实例

例子 1

使用 class="child" 更改第一个列表项的文本：

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

亲自试一试

例子 2

"myDIV" 中 class="child" 的元素数：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

亲自试一试

例子 3

更改 class="child" 的第二个元素的大小：

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

亲自试一试

例子 4

在 class="example" 的第二个元素中使用 "child" 和 "color" 类更改第一个元素的大小：

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

亲自试一试

例子 5

更改 class="child" 的 “myDIV” 中所有元素的颜色：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

亲自试一试

语法

element.getElementsByClassName(classname)

参数

参数 描述
classname

必需。子元素的类名。

用空格分隔多个名称（比如 "child color"）。

返回值

类型 描述
NodeList

包含给定类名的元素的子元素。

元素按照它们在源代码中出现的顺序进行排序。

浏览器支持

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

所有浏览器都完全支持它：

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