Metode getElementsByClassName() HTML DOM Element

Definisi dan penggunaan

getElementsByClassName() Metode mengembalikan kumpulan anak yang mempunyai nama kelas yang diberikan, dalam bentuk objek NodeList.

Lihat juga:

Sifat classList

Sifat className

Metode querySelector()

Metode querySelectorAll()

Metode getElementsByTagName()

Objek Style HTML DOM

Maklumat:

Babu CSS

Pemilihan Penyunting CSS

Panduan Pemilihan Penyunting CSS

NodeList

NodeList Adalah koleksi nod yang seperti array (senarai).

Anda boleh melawati nod di dalam senarai melalui indeks (pemboleh ubah). Indeks bermula dari 0.

Sifat lengthKembalikan bilangan nod di dalam senarai.

Contoh

Contoh 1

Ubah teks pertama dalam senarai menggunakan class="child":

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

親自試試

Contoh 2

Bilangan elemen class="child" di dalam "myDIV":

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

親自試試

Contoh 3

Tukar saiz elemen kedua 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 支持 支持 支持 支持