HTML DOM getElementsByClassName() 方法
HTML DOM 的 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象
NodeList 对象代表一个有顺序的节点列表
我们可通过节点列表中的节点索引号来访问 NodeList 对象中的节点，索引号由 0 开始
可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素
浏览器支持
| Yes | 9.0+ | Yes | Yes | Yes |
语法
element.getElementsByClassName( classname )
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| classname | String | 必须。需要获取的元素类名 多个类名使用空格分隔，如 "test demo" |
返回值
NodeList 对象，表示指定类名的元素集合
元素在集合中的顺序以其在代码中的出现次序排序
范例
在 class="example" 的列表中修改 class="child" 的第一项(索引值为 0) 的文
var list = document.getElementsByClassName("example")[0]; list.getElementsByClassName("child")[0].innerHTML = "Milk";
范例
修改 <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;
范例
修改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 对象