Latest web development tutorials

HTML DOM getElementsByClassName () metode

Elemen Object Reference objek elemen

contoh

Memodifikasi kelas list = "contoh" di kelas = "anak" dari item pertama (nilai indeks 0) teks:

daftar var = document.getElementsByClassName ( "contoh" ) [0];
list.getElementsByClassName ( "anak") [0 ] .innerHTML = "Milk";

Mengubah teks sebelum:

  • kopi
  • teh

Setelah memodifikasi teks:

  • susu
  • teh

Coba »

Definisi dan penggunaan

Metode getElementsByClassName () mengembalikan semua elemen dalam dokumen menentukan nama kelas koleksi, seperti NodeList objek.

objek NodeList merupakan urutan daftar node. NodeList keberatan kita dapat mengakses daftar node (nomor indeks mulai dari 0) melalui daftar node dari nomor indeks simpul.

Tip: Anda dapat menggunakan objek NodeList ini panjang properti untuk menentukan jumlah elemen dengan nama kelas, dan berbagai elemen siklus untuk mendapatkan elemen yang Anda butuhkan.


Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.

cara
getElementsByClassName () 4.0 9.0 3.0 3.1 9.5

tatabahasa

Unsur .getElementsByClassName (classname)

Nilai parameter

parameter jenis deskripsi
classname tali Harus. kelas elemen yang Anda butuhkan untuk mendapatkan nama.

Beberapa nama kelas dipisahkan oleh spasi, seperti "test demo".

teknis Deskripsi

DOM Versi: Inti Level 1 Elemen Object
Kembali Nilai: NodeList objek yang mewakili elemen menentukan nama kelas koleksi. Urutan elemen dalam koleksi semacam dalam rangka penampilan dalam kode.

contoh

contoh yang lebih

contoh

Memodifikasi <div> unsur dalam kelas dua = "anak" unsur-unsur warna latar belakang:

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

Coba »

contoh

Lihat <div> unsur dalam jumlah class = elemen "anak" (menggunakan NodeList properti panjang) adalah:

var x = document.getElementById ( "myDiv" ) .getElementsByClassName ( "anak") .length;

x Outputnya adalah:

3

Coba »

contoh

Memodifikasi class = "contoh" unsur-unsur di kelas pertama disebut warna latar belakang "anak" dan "warna" elemen:

var x = document.getElementsByClassName ( "contoh" ) [1];
x.getElementsByClassName ( "anak mewarnai") [ 0] .style.backgroundColor = "red";

Coba »

contoh

Memodifikasi elemen <div> class = "anak" dari semua unsur warna latar belakang:

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

Coba »

Artikel terkait

CSS tutorial: CSS

CSS Referensi: CSS .class

Pedoman HTML DOM Referensi: document.getElementsByClassName ()

HTML DOM Referensi: atribut className

Pedoman HTML DOM Referensi: HTML DOM Style Object


Elemen Object Reference objek elemen