Koleksi DOM JavaScript H TML
Objek Koleksi HTML
Metode getElementsByTagName()
mengembalikan HTMLCollection
objek.
Objek HTMLCollection
adalah daftar (koleksi) elemen HTML seperti array.
Kode berikut memilih semua <p>
elemen dalam dokumen:
Contoh
const myCollection = document.getElementsByTagName("p");
Elemen dalam koleksi dapat diakses dengan nomor indeks.
Untuk mengakses elemen <p> kedua, Anda dapat menulis:
myCollection[1]
Catatan: Indeks dimulai dari 0.
Panjang Koleksi HTML HTML
Properti length
mendefinisikan jumlah elemen dalam HTMLCollection
:
Contoh
myCollection.length
Properti length
ini berguna saat Anda ingin mengulang elemen dalam koleksi:
Contoh
Ubah warna teks semua elemen <p>:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
Sebuah HTMLCollection BUKAN sebuah array!
Sebuah HTMLCollection mungkin terlihat seperti sebuah array, tetapi sebenarnya tidak.
Anda dapat mengulang daftar dan merujuk ke elemen dengan angka (seperti array).
Namun, Anda tidak dapat menggunakan metode array seperti valueOf(), pop(), push(), atau join() pada HTMLCollection.