HTML DOM getElementsByClassName() 方法
定義和使用
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為NodeList 對象。
NodeList 對象代表一個有順序的節點列表。 NodeList 對像我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。
提示：你可以使用NodeList對象的length屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素。
瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
| 方法 | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
語法
document.getElementsByClassName( classname )
參數
| 參數 | 類型 | Description |
|---|---|---|
| classname | String | 必須。 你需要獲取的元素類名。 多個類名使用空格分隔，如"test demo"。 |
技術描述
| DOM 版本: | Core Level 1 Document Object |
|---|---|
| 返回值： | NodeList 對象，表示指定類名的元素集合。 元素在集合中的順序以其在代碼中的出現次序排序。 |
更多實例
實例
獲取包含"example" 和"color" 類名的所有元素:
var x =
document.getElementsByClassName( "example color" );
嘗試一下»
實例
查看文檔中有多少個樣式class="example" 的元素(使用NodeList 對的length 屬性):
var x =
document.getElementsByClassName( "example" ).length;
嘗試一下»
實例
修改所有樣式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" ;
}
嘗試一下»
相關頁面
CSS教程: CSS選擇器
CSS參考手冊: CSS .class選擇器
HTML DOM參考手冊: element .getElementsByClassName()
HTML DOM參考手冊: className屬性
HTML DOM參考手冊: HTML DOM classList屬性
HTML DOM參考手冊: HTML DOM Style對象