更多"Try it Yourself"下面的例子。
定義和用法
的getElementsByClassName()方法返回與指定的類名的文檔中的所有元素的集合,作為一個節點列表對象。
該節點列表對象表示節點的集合。 節點可以通過索引號來訪問。 該指數從0開始。
提示:您可以使用長度的NodeList對象的屬性來確定與指定的類名元素的數量,那麼你可以通過所有元素循環和提取所需的信息。
瀏覽器支持
在表中的數字規定,完全支持方法的第一個瀏覽器版本。
方法 | |||||
---|---|---|---|---|---|
getElementsByClassName() | 4 | 9 | 3.0 | 3.1 | 9.5 |
句法
document.getElementsByClassName( classname )
參數值
參數 | 類型 | 描述 |
---|---|---|
classname | String | 需要。 你想獲得的元素的類名。 要搜索多個類名,他們用空格隔開,像"test demo" 。 |
技術細節
DOM版本: | 核心1級文檔對象 |
---|---|
返回值: | 甲NodeList對象,表示與指定的類名的元素的集合。 當它們出現在源代碼中返回的集合中的元素進行排序。 |
更多示例
例
找出帶有class =“示例”多少個元素有在文檔中(使用NodeList對象的長度屬性):
var x =
document.getElementsByClassName("example").length;
試一試» 例
改變與類=“示例”的所有元素的背景色:
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
}
試一試» 相關頁面
CSS教程: CSS選擇器
CSS參考: CSS選擇器的.class
HTML DOM參考: 元素 。 getElementsByClassName()
HTML DOM參考: className Property
HTML DOM參考: classList Property
HTML DOM參考: Style對象