HTML DOM getElementsByClassName() 方法
Document 對(duì)象定義和使用
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對(duì)象。
NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 我們可通過節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來訪問列表中的節(jié)點(diǎn)(索引號(hào)由0開始)。
提示： 你可以使用 NodeList 對(duì)象的length 屬性來確定指定類名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來獲取你需要的那個(gè)元素。
瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。
| 方法 | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
語(yǔ)法
document.getElementsByClassName(classname)
參數(shù)
| 參數(shù) | 類型 | Description |
|---|---|---|
| classname | String | 必須。你需要獲取的元素類名。 多個(gè)類名使用空格分隔，如 "test demo"。 |
技術(shù)描述
| DOM 版本: | Core Level 1 Document Object |
|---|---|
| 返回值： | NodeList 對(duì)象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現(xiàn)次序排序。 |
更多實(shí)例
實(shí)例
獲取包含 "example" 和 "color" 類名的所有元素:
var x =document.getElementsByClassName("example color");
嘗試一下 ?
實(shí)例
查看文檔中有多少個(gè)樣式 class="example" 的元素 (使用 NodeList 對(duì)的 length 屬性):
var x =document.getElementsByClassName("example").length;
嘗試一下 ?
實(shí)例
修改所有樣式 class="example" 元素的背景顏色：
var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
嘗試一下 ?
相關(guān)頁(yè)面
CSS 參考手冊(cè): CSS 選擇器
CSS 參考手冊(cè): CSS .class 選擇器
HTML DOM 參考手冊(cè): element.getElementsByClassName()
HTML DOM 參考手冊(cè): className 屬性
HTML DOM 參考手冊(cè): HTML DOM classList 屬性
HTML DOM 參考手冊(cè): HTML DOM Style 對(duì)象
更多建議：