Koleksi JavaScript HTML DOM

Objek HTMLCollection

getElementsByTagName() Method mengembalikan HTMLCollection Objek.

Objek HTMLCollection adalah daftar objek HTML yang mirip dengan array (kumpulan).

Kode di bawah ini memilih semua elemen <p> dalam dokumen:

Contoh

var x = document.getElementsByTagName("p");

Elemen dalam kumpulan ini dapat diakses melalui nomor indeks.

Untuk mengakses elemen <p> kedua, Anda dapat menulis seperti ini:

y = x[1];

Coba sendiri

Keterangan:Indeks dimulai dari 0.

Panjang HTMLCollection

length Definisi properti menentukan jumlah elemen dalam HTMLCollection:

Contoh

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

Coba sendiri

Penjelasan contoh:

  • Buat koleksi semua elemen <p>
  • Tampilkan panjang koleksi

length Properti ini berguna saat Anda memerlukan untuk mengelilingi elemen dalam koleksi:

Contoh

Ubah warna latar belakang semua elemen <p>:

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

Coba sendiri

HTMLCollection bukan array!

HTMLCollection mungkin terlihat seperti array, tetapi bukan array.

Anda dapat mengelilingi daftar melalui referensi angka elemen (seperti array).

Tetapi, Anda tidak dapat menggunakan metode array untuk HTMLCollection, seperti valueOf()、pop()、push() atau join().