Metode getElementsByClassName() HTML DOM Element

Definisi dan penggunaan

getElementsByClassName() Metode mengembalikan koleksi elemen anak dengan nama kelas yang diberikan, dalam objek NodeList.

Lihat pula:

Atribut classList

Atribut className

Metode querySelector()

Metode querySelectorAll()

Metode getElementsByTagName()

Objek Style HTML DOM

Tutorial:

Syntax CSS

Pemilih CSS

Panduan Pemilih CSS

NodeList

NodeList Adalah koleksi node yang mirip dengan array (daftar).

Anda dapat mengakses node dalam daftar melalui indeks (indeks). Indeks dimulai dari 0.

Atribut lengthKembalikan jumlah node dalam daftar.

Contoh

Contoh 1

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

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

Coba Sendiri

Contoh 2

Jumlah elemen class="child" di "myDIV":

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

Coba Sendiri

Contoh 3

Ubah ukuran elemen kedua class="child":

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

Coba Sendiri

Contoh 4

Ganti ukuran pertama elemen yang menggunakan kelas "child" dan "color" di elemen kedua yang memiliki class="example":

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

Coba Sendiri

Contoh 5

Ubah warna semua elemen di "myDIV" dengan class="child":

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

Coba Sendiri

Sintaks

element.getElementsByClassName(classname)

Parameter

Parameter Deskripsi
classname

Diperlukan. Nama kelas anak.

Pisahkan beberapa nama dengan spasi (seperti "child color").

Nilai Pengembalian

Tipe Deskripsi
NodeList

Anak elemen yang mengandung nama kelas yang diberikan.

Elemen diurutkan berdasarkan urutan munculnya di kode asli.

Dukungan Peramban

element.getElementsByClassName() Adalah fitur DOM Level 1 (1998).

Semua peramban mendukungnya sepenuhnya:

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