HTML DOM Document getElementsByClassName() 方法

定義和用法

getElementsByClassName() 方法返回擁有指定類名的元素集合。

getElementsByClassName() 方法返回 HTMLCollection。

getElementsByClassName() 屬性是只讀的。

HTMLCollection

HTMLCollection 是 HTML 元素的類似數組的集合（列表）。

可以通過索引訪問集合中的元素（從 0 開始）。

length 屬性返回集合中元素的數量。

另請參閱：

getElementById() 方法

getElementsByTagName() 方法

querySelector() 方法

querySelectorAll() 方法

HTMLCollection 對象

實例

例子 1

獲取所有帶有 class="example" 的元素：

const collection = document.getElementsByClassName("example");

親自試一試

例子 2

獲取同時有 "example" 和 "color" 類的所有元素：

const collection = document.getElementsByClassName("example color");

親自試一試

例子 3

class="example" 的元素數量：

let numb = document.getElementsByClassName("example").length;

親自試一試

例子 4

更改 class="example" 的所有元素的背景色：

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

親自試一試

語法

document.getElementsByClassName(classname)

參數

參數 描述
classname

必需。元素的類名。

可檢索由空格分隔的多個類名，例如 "test demo"。

返回值

類型 描述
對象

HTMLCollection 對象。

擁有指定類名的元素的集合。

按照在文檔中出現的順序對元素進行排序。

瀏覽器支持

document.getElementsByClassName() 是 DOM Level 1 (1998) 特性。

所有瀏覽器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相關頁面

CSS 教程：CSS 語法

CSS 參考手冊：CSS .class 選擇器

HTML DOM 參考手冊：element.getElementsByClassName()

HTML DOM 參考手冊：className 屬性

HTML DOM 參考手冊：classList 屬性

HTML DOM 參考手冊：Style 對象