Metode getElementsByClassName() HTML DOM Element
- Halaman Sebelumnya getBoundingClientRect()
- Halaman Berikutnya getElementsByTagName()
- Kembali ke TINGKAT UTAMA Objek Elements DOM HTML
Definisi dan penggunaan
getElementsByClassName()
Metode mengembalikan koleksi elemen anak dengan nama kelas yang diberikan, dalam objek NodeList.
Lihat pula:
Tutorial:
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";
Contoh 2
Jumlah elemen class="child" di "myDIV":
const element = document.getElementById("myDIV"); const nodes = element.getElementsByClassName("child"); let number = nodes.length;
Contoh 3
Ubah ukuran elemen kedua class="child":
const element = document.getElementById("myDIV"); element.getElementsByClassName("child")[1].style.fontSize = 24px";
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";
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"; }
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 |
- Halaman Sebelumnya getBoundingClientRect()
- Halaman Berikutnya getElementsByTagName()
- Kembali ke TINGKAT UTAMA Objek Elements DOM HTML