Koleksi DOM HTML: Contoh dan Cara Membuat Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 22, 2020

Objek HTMLCollection

Metode getElementsByTagName() mengembalikan objek HTMLCollection.

Objek HTMLCollection adalah daftar (kumpulan) elemen HTML seperti array.

Kode berikut menunjukan cara memilih semua <p> elemen dalam dokumen.

Contoh:

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

Elemen-elemen dalam koleksi dapat diakses dengan nomor indeks.

Untuk mengakses elemen <p> kedua Anda dapat menulis, dengan kode:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"HTML bagian dalam dari paragraf kedua adalah: " +
myCollection[1].innerHTML;
</script>

</body>
</html>

Catatan: Indeks dimulai dari 0.

HTML HTMLCollection Length

Properti length menentukan jumlah elemen dalam HTMLCollection.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
"Dokumen ini berisi " + myCollection.length + " paragraf.";
</script>

</body>
</html>

Penjelasan Contoh:

Buat koleksi dari semua elemen <p>
Tampilkan panjang koleksinya

Properti length berguna saat ingin mmebuat loop elemen dalam koleksi:

Contoh:
Ubah warna latar belakang dari semua elemen <p>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p> Klik tombol untuk mengubah warna semua elemen p. </p>
<button onclick="myFunction()">Klik</button>

<script>
function myFunction() {
  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

HTMLCollection BUKAN sebuah array!

HTMLCollection mungkin terlihat seperti sebuah array, tetapi sebenarnya tidak.

Anda dapat melakukan loop melalui daftar dan merujuk ke elemen dengan angka (seperti array).

Namun, Anda tidak dapat menggunakan metode array seperti valueOf(), pop(), push(), atau join() pada HTMLCollection.

javascript