HTML DOM getElementsByClassName() 方法

元素对象参考手册元素对象

实例代码

在 class="example" 的列表中修改 class="child" 的第一项(索引值为 0) 的文：

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

修改文本前:

Coffee
Tea

修改文本后:

Milk
Tea

定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

语法

element.getElementsByClassName(classname)

参数值

参数	类型	描述
classname	String	必须。你需要获取的元素类名。多个类名使用空格分隔，如 "test demo"。

技术描述

DOM Version:	Core Level 1 Element Object
Return Value:	NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。

实例代码

修改 <div> 元素中第二个 class="child" 元素的背景颜色：

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

实例代码

查看 <div> 元素中有多少个 class="child" 的元素 (使用 NodeList 的 length 属性):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

x 输出结果为:

实例代码

修改class="example"元素中第一个类名为 "child" 和 "color" 元素的背景颜色：

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

实例代码

修改 <div> 元素中 class="child" 的所有元素背景颜色：

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

CSS 教程: CSS 选择器

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

HTML DOM 参考手册: document.getElementsByClassName()

HTML DOM 参考手册: className 属性

HTML DOM 参考手册: HTML DOM Style 对象

元素对象参考手册元素对象