例
改变带class =“孩子”的第一个列表项的文本(index 0)与类=“榜样”的列表：
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
更改文本之前：
- Coffee
- Tea
改变后的文字：
- Milk
- Tea
试一试» 更多"Try it Yourself"下面的例子。
定义和用法
的getElementsByClassName()方法返回与指定类名的元素的子元素的集合，作为一个节点列表对象。
该节点列表对象表示节点的集合。 节点可以通过索引号来访问。 该指数从0开始。
提示：您可以使用长度的NodeList对象的属性来确定与指定类名称的子节点的数量，那么你可以通过所有节点的循环，并提取所需的信息。
浏览器支持
在表中的数字规定，完全支持方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4 | 9 | 3.0 | 3.1 | 9.5 |
句法
element .getElementsByClassName( classname )参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| classname | String | 需要。 你想获得的子元素的类名。 要搜索多个类名，他们用空格隔开，就像"child color" 。 |
技术细节
| DOM版本： | 核心1级元素对象 |
|---|---|
| 返回值： | 的NodeList对象，表示元素与指定的类名的子元素的集合。 当它们出现在源代码中返回的集合中的元素进行排序。 |
更多示例
例
改变第二元件的背景色与类=一个的内部的“子” <div>元素：
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; 试一试» 例
找出与类=“子”多少个元素有一个内部<div>元件（使用NodeList对象的长度属性）：
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;x的结果将是：
3 试一试» 例
改变同时与所述第一元件的背景色"child"和"color"与类=“例如”一个元件的内部等级：
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; 试一试» 例
改变的内部带class =“子”的所有元素的背景色<div>元素：
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参考： 文件。 getElementsByClassName()
HTML DOM参考： className Property
HTML DOM参考： classList Property
HTML DOM参考： HTML DOM Style对象