Metode getElementsByClassName() HTML DOM
Objek ElemenContoh
Ubah teks item daftar pertama dengan class="child" (indeks 0) dalam daftar dengan class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Metode getElementsByClassName() mengembalikan kumpulan elemen anak elemen dengan nama kelas yang ditentukan, sebagai objek NodeList.
Objek NodeList mewakili kumpulan node. Node dapat diakses dengan nomor indeks. Indeks dimulai dari 0.
Tip: Anda dapat menggunakan properti length dari objek NodeList untuk menentukan jumlah node anak dengan nama kelas yang ditentukan, kemudian Anda dapat mengulang semua node dan mengekstrak info yang Anda inginkan.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
Sintaksis
element.getElementsByClassName(classname)
Nilai Parameter
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
Detail Teknis
| Versi DOM: | Objek Elemen Level 1 Inti |
|---|---|
| Nilai Kembali: | Objek NodeList, mewakili kumpulan elemen anak elemen dengan nama kelas yang ditentukan. Elemen dalam koleksi yang dikembalikan diurutkan seperti yang muncul dalam kode sumber. |
Lebih Banyak Contoh
Contoh
Ubah warna latar belakang elemen kedua dengan class="child" di dalam elemen <div>:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
Contoh
Cari tahu berapa banyak elemen dengan class="child" yang ada di dalam elemen <div> (menggunakan properti length dari objek NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
Contoh
Ubah warna latar belakang elemen pertama dengan kelas "anak" dan "warna" di dalam elemen dengan class="contoh":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
Contoh
Ubah warna latar belakang semua elemen dengan class="child" di dalam elemen <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Halaman Terkait
Tutorial CSS: Sintaks CSS
Referensi CSS: CSS .class Selector
Referensi DOM HTML: document.getElementsByClassName()
Referensi DOM HTML: Properti className
Referensi DOM HTML: Properti classList
Referensi DOM HTML: Objek Gaya DOM HTML
Objek Elemen