HTML DOM getElementsByClassName() Method

<Elemen Object

Contoh

Mengubah teks item daftar pertama dengan class = "anak" (index 0) dalam daftar dengan class = "contoh":

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

Sebelum mengubah teks:

Coffee
Tea

Setelah mengubah teks:

Milk
Tea

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The getElementsByClassName() metode mengembalikan koleksi elemen anak elemen dengan nama kelas tertentu, sebagai objek NodeList.

Objek NodeList merupakan kumpulan node. Node dapat diakses oleh angka indeks. indeks dimulai dari 0.

Tip: Anda dapat menggunakan panjang milik objek NodeList untuk menentukan jumlah node anak dengan nama kelas yang ditentukan, maka Anda dapat loop melalui semua node dan ekstrak info yang Anda inginkan.

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Sintaksis

element .getElementsByClassName( classname )

Nilai parameter

Parameter	Mengetik	Deskripsi
classname	String	Wajib. Nama kelas dari elemen anak Anda ingin mendapatkan. Untuk mencari beberapa nama kelas, pisahkan dengan spasi, seperti "child color" .

Rincian teknis

DOM Versi:	Inti Level 1 Elemen Object
Kembali Nilai:	Sebuah objek NodeList, mewakili koleksi elemen anak elemen dengan nama kelas tertentu. Unsur-unsur dalam koleksi dikembalikan diurutkan seperti yang muncul dalam kode sumber.

Contoh lebih

Contoh

Mengubah warna latar belakang dari elemen kedua dengan class = "anak" dalam sebuah <div> elemen:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Cobalah sendiri "

Contoh

Cari tahu berapa banyak elemen dengan class = "anak" ada dalam sebuah <div> elemen (menggunakan properti panjang dari objek NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

Hasil x akan:

Cobalah sendiri "

Contoh

Mengubah warna latar belakang dari elemen pertama dengan kedua "child" dan "color" kelas dalam elemen dengan class = "contoh":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Cobalah sendiri "

Contoh

Mengubah warna latar belakang dari semua elemen dengan class = "anak" dalam sebuah <div> elemen:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

Cobalah sendiri "