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