最新的Web开发教程
 

HTML DOM getElementsByClassName() Method

<文档对象

获取与指定类名的所有元素:

var x = document.getElementsByClassName("example");
试一试»

更多"Try it Yourself"下面的例子。


定义和用法

getElementsByClassName()方法返回与指定的类名的文档中的所有元素的集合,作为一个节点列表对象。

该节点列表对象表示节点的集合。 节点可以通过索引号来访问。 该指数从0开始。

提示:您可以使用长度的NodeList对象的属性来确定与指定的类名元素的数量,那么你可以通过所有元素循环和提取所需的信息。


浏览器支持

在表中的数字规定,完全支持方法的第一个浏览器版本。

方法
getElementsByClassName() 4 9 3.0 3.1 9.5

句法

document.getElementsByClassName( classname )

参数值

参数 类型 描述
classname String 需要。 你想获得的元素的类名。

要搜索多个类名,他们用空格隔开,像"test demo"

技术细节

DOM版本: 核心1级文档对象
返回值: 甲NodeList对象,表示与指定的类名的元素的集合。 当它们出现在源代码中返回的集合中的元素进行排序。

例子

更多示例

获得同时与所有元素"example""color"类:

var x = document.getElementsByClassName("example color");
试一试»

找出带有class =“示例”多少个元素有在文档中(使用NodeList对象的长度属性):

var x = document.getElementsByClassName("example").length;
试一试»

改变与类=“示例”的所有元素的背景色:

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
试一试»

相关页面

CSS教程: CSS选择器

CSS参考: CSS选择器的.class

HTML DOM参考: 元素 getElementsByClassName()

HTML DOM参考: className Property

HTML DOM参考: classList Property

HTML DOM参考: Style对象


<文档对象