Metode getElementsByClassName() DOM HTML Document

Definisi dan penggunaan

getElementsByClassName() Metode mengembalikan kumpulan elemen yang memiliki nama kelas yang ditentukan.

getElementsByClassName() Metode mengembalikan HTMLCollection.

getElementsByClassName() Atribut adalah hanya-baca.

HTMLCollection

HTMLCollection Adalah kumpulan seperti array yang mirip dengan elemen HTML (daftar).

Elemen dalam kumpulan dapat diakses melalui indeks (dari 0).

length Atribut mengembalikan jumlah elemen dalam kumpulan.

Lihat juga:

Metode getElementById()

Metode getElementsByTagName()

Metode querySelector()

Metode querySelectorAll()

Objek HTMLCollection

Contoh

Contoh 1

Mendapatkan semua elemen yang mempunyai class="example":

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

Coba sendiri

Contoh 2

Mendapatkan elemen yang sama ada "example" dan "color" kelas:

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

Coba sendiri

Contoh 3

Bilangan elemen dengan class="example":

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

Coba sendiri

Contoh 4

Ubah warna latar belakang semua elemen dengan class="example":

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

Coba sendiri

Sintaks

document.getElementsByClassName("example")classname)

Parameter

Parameter Penerangan
classname

Diperlukan. Nama kelas elemen.

Dapat dicari beberapa nama kelas yang dipisahkan ruang, contohnya "test demo".

Kembali nilai

Jenis Penerangan
Objek

Objek HTMLCollection.

Koleksi elemen dengan nama kelas yang ditentukan.

Mengurutkan elemen berdasarkan urutan muncul dalam dokumen.

Dukungan pelayar

document.getElementsByClassName() Adalah ciri DOM Level 1 (1998).

Semua pelayar mendukungnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan

Laman yang berkaitan

Panduan CSS:Sintaks CSS

Panduan referensi CSS:Pemilihan Pilih .class CSS

Panduan referensi DOM HTML:element.getElementsByClassName()

Panduan referensi DOM HTML:Sifat className

Panduan referensi DOM HTML:Sifat classList

Panduan referensi DOM HTML:Objek Style