HTML DOM Element getElementsByClassName() 方法

定義和用法

getElementsByClassName() 方法返回擁有給定類名的子元素的集合，以 NodeList 對象。

另請參閱：

classList 屬性

className 屬性

querySelector() 方法

querySelectorAll() 方法

getElementsByTagName() 方法

HTML DOM Style 對象

教程：

CSS 語法

CSS 選擇器

CSS 選擇器參考手冊

NodeList

NodeList 是類似數組的節點集合（列表）。

您可通過索引（下標）訪問列表中的節點。索引從 0 開始。

length 屬性返回列表中的節點數。

實例

例子 1

使用 class="child" 更改第一個列表項的文本：

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

親自試一試

例子 2

"myDIV" 中 class="child" 的元素數：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

親自試一試

例子 3

更改 class="child" 的第二個元素的大小：

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

親自試一試

例子 4

在 class="example" 的第二個元素中使用 "child" 和 "color" 類更改第一個元素的大小：

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

親自試一試

例子 5

更改 class="child" 的 “myDIV” 中所有元素的顏色：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

親自試一試

語法

element.getElementsByClassName(classname)

參數

參數 描述
classname

必需。子元素的類名。

用空格分隔多個名稱（比如 "child color"）。

返回值

類型 描述
NodeList

包含給定類名的元素的子元素。

元素按照它們在源代碼中出現的順序進行排序。

瀏覽器支持

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

所有瀏覽器都完全支持它：

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