HTML DOM getElementsByClassName() 方法

實例

在class="example" 的列表中修改class="child" 的第一項(索引值為0) 的文：

var list = document.getElementsByClassName( "example" )[ 0 ];
list.getElementsByClassName( "child" )[ 0 ].innerHTML = "Milk" ;

修改文本前:

Coffee
Tea

修改文本後:

Milk
Tea

嘗試一下»

定義和使用

getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為NodeList 對象。

NodeList 對象代表一個有順序的節點列表。 NodeList 對像我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

提示：你可以使用NodeList對象的length屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素。

瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。

方法
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

語法

element .getElementsByClassName( classname )

參數值

參數	類型	描述
classname	String	必須。你需要獲取的元素類名。多個類名使用空格分隔，如"test demo"。

技術描述

DOM Version:	Core Level 1 Element Object
Return Value:	NodeList 對象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現次序排序。

實例

修改<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;

x輸出結果為:

嘗試一下»

實例

修改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對象

元素對象

上一頁： HTML DOM getElementsByClassName()方法

下一頁： HTML DOM classList屬性