Metode getElementsByClassName() DOM HTML Document

Definisi dan penggunaan

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

getElementsByClassName() Metode ini mengembalikan HTMLCollection.

getElementsByClassName() Atributnya hanya baca.

HTMLCollection

HTMLCollection Adalah kumpulan seperti array dari elemen HTML (daftar).

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

length Atribut mengembalikan jumlah elemen dalam kumpulan.

Lihat pula:

Metode getElementById()

Metode getElementsByTagName()

Metode querySelector()

Metode querySelectorAll()

Objek HTMLCollection

Contoh

Contoh 1

Ambil semua elemen dengan class="example":

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

Coba Sendiri

Contoh 2

Ambil semua elemen yang memiliki kelas "example" dan "color":

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

Coba Sendiri

Contoh 3

Jumlah 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("classname)

Parameter

Parameter Deskripsi
classname

Diperlukan. Nama kelas elemen.

Dapat mencari banyak kelas yang dipisahkan spasi, seperti "test demo".

Nilai Kembalian

Tipe Deskripsi
Objek

Objek HTMLCollection.

Koleksi elemen dengan nama kelas yang ditentukan.

Menata elemen menurut urutan muncul di dokumen.

Dukungan Peramban

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

Semua peramban mendukungnya:

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

Halaman yang Berhubungan

Panduan CSS:Syarat CSS

Panduan Referensi CSS:Pemilih .class CSS

Panduan Referensi HTML DOM:element.getElementsByClassName()

Panduan Referensi HTML DOM:Properti className

Panduan Referensi HTML DOM:Properti classList

Panduan Referensi HTML DOM:Objek Style