最新的Web開發教程
 

HTML DOM getElementsByClassName() Method

<元素對象

改變帶class =“孩子”的第一個列表項的文本(index 0)與類=“榜樣”的列表:

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

更改文本之前:

  • Coffee
  • Tea

改變後的文字:

  • Milk
  • Tea
試一試»

更多"Try it Yourself"下面的例子。


定義和用法

getElementsByClassName()方法返回與指定類名的元素的子元素的集合,作為一個節點列表對象。

該節點列表對象表示節點的集合。 節點可以通過索引號來訪問。 該指數從0開始。

提示:您可以使用長度的NodeList對象的屬性來確定與指定類名稱的子節點的數量,那麼你可以通過所有節點的循環,並提取所需的信息。


瀏覽器支持

在表中的數字規定,完全支持方法的第一個瀏覽器版本。

方法
getElementsByClassName() 4 9 3.0 3.1 9.5

句法

element .getElementsByClassName( classname )

參數值

參數 類型 描述
classname String 需要。 你想獲得的子元素的類名。

要搜索多個類名,他們用空格隔開,就像"child color"

技術細節

DOM版本: 核心1級元素對象
返回值: 的NodeList對象,表示元素與指定的類名的子元素的集合。 當它們出現在源代碼中返回的集合中的元素進行排序。

例子

更多示例

改變第二元件的背景色與類=一個的內部的“子” <div>元素:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
試一試»

找出與類=“子”多少個元素有一個內部<div>元件(使用NodeList對象的長度屬性):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

x的結果將是:

3
試一試»

改變同時與所述第一元件的背景色"child""color"與類=“例如”一個元件的內部等級:

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
試一試»

改變的內部帶class =“子”的所有元素的背景色<div>元素:

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參考: 文件。 getElementsByClassName()

HTML DOM參考: className Property

HTML DOM參考: classList Property

HTML DOM參考: HTML DOM Style對象


<元素對象