Sign in Subscribe
Javascript

Mengambil Elemen HTML Secara Dinamis dengan Item HTML Collection

Mengambil Elemen HTML Secara Dinamis dengan Item HTML Collection
Photo by Niels Kehl / Unsplash

Ketika membangun website interaktif dengan JavaScript, kita sering kali perlu mengambil dan memanipulasi banyak elemen HTML sekaligus. Salah satu cara efektif untuk melakukannya adalah dengan HTMLCollection, yang memungkinkan kita mengakses elemen-elemen berdasarkan tag name, class, atau id.

Di artikel ini, kita akan membahas cara mengambil elemen HTML secara dinamis menggunakan Item HTMLCollection, membandingkannya dengan NodeList, dan memberikan contoh penggunaan yang mudah dipahami. Dengan pemahaman ini, kamu bisa meningkatkan keterampilan JavaScript-mu dan membuat interaksi web lebih fleksibel dan efisien.

Apa Itu HTMLCollection?

Sebelum kita masuk ke cara mengambil elemen HTML secara dinamis, mari pahami dulu apa itu HTMLCollection. HTMLCollection adalah kumpulan elemen HTML yang dikembalikan oleh metode seperti:

  • document.getElementsByTagName() → Mengambil elemen berdasarkan nama tag
  • document.getElementsByClassName() → Mengambil elemen berdasarkan nama kelas
  • document.forms → Mengambil semua elemen <form> dalam dokumen
  • document.images → Mengambil semua elemen <img> dalam dokumen
  • document.links → Mengambil semua elemen <a> dalam dokumen

Salah satu cara utama untuk mengakses elemen dalam HTMLCollection adalah menggunakan item(), yang memungkinkan kita mengambil elemen berdasarkan indeksnya, mirip seperti array.

Cara Menggunakan item() dalam HTMLCollection

Metode item() pada HTMLCollection digunakan untuk mengambil elemen berdasarkan indeksnya.

1. Menggunakan getElementsByTagName dengan item()

Misalnya, kita ingin mengambil semua paragraf (<p>) dalam halaman web:

<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
<p>Paragraf ketiga</p>
<button onclick="ubahTeks()">Ubah Paragraf</button>

<script>
    function ubahTeks() {
        let paragraf = document.getElementsByTagName("p");
        let elemenPertama = paragraf.item(0); // Ambil elemen pertama
        elemenPertama.textContent = "Teks ini telah diubah!";
    }
</script>

Ketika tombol diklik, teks paragraf pertama akan berubah. item(0) mengambil elemen pertama dari HTMLCollection.

2. Menggunakan getElementsByClassName dengan item()

Jika ingin mengambil elemen berdasarkan kelas, gunakan getElementsByClassName():

<div class="kotak">Kotak 1</div>
<div class="kotak">Kotak 2</div>
<div class="kotak">Kotak 3</div>
<button onclick="ubahKotak()">Ubah Kotak Pertama</button>

<script>
    function ubahKotak() {
        let kotak = document.getElementsByClassName("kotak");
        kotak.item(0).style.backgroundColor = "blue";
    }
</script>

Ketika tombol diklik, latar belakang kotak pertama akan berubah menjadi biru.

HTMLCollection vs NodeList

Banyak yang bingung antara HTMLCollection dan NodeList. Meskipun keduanya mirip, ada beberapa perbedaan utama:

Fitur HTMLCollection NodeList
Bisa diperbarui secara dinamis? ✅ Ya ❌ Tidak
Mendukung .forEach()? ❌ Tidak ✅ Ya
Diakses dengan item()? ✅ Ya ✅ Ya
Diakses dengan indeks? ✅ Ya ✅ Ya

Kesimpulan: Jika butuh elemen yang diperbarui secara real-time (misalnya, elemen yang berubah setelah manipulasi DOM), gunakan HTMLCollection. Jika hanya ingin mengakses elemen statis, NodeList bisa jadi pilihan lebih baik.

Keuntungan Menggunakan item() dalam HTMLCollection

✅ Lebih cepat dibandingkan querySelectorAll() – Karena HTMLCollection lebih ringan.
✅ Terupdate secara dinamis – Setiap kali DOM berubah, HTMLCollection langsung mengikuti.
✅ Mempermudah pengambilan elemen dengan indeks – Ideal untuk manipulasi batch elemen.

Namun, ada juga kekurangan: ❌ Tidak bisa langsung menggunakan forEach() – Harus dikonversi ke array dulu.
❌ Tidak fleksibel seperti querySelectorAll() – Hanya bisa digunakan dengan metode spesifik.

Menggunakan HTMLCollection dengan Loop

Karena HTMLCollection tidak mendukung .forEach(), kita bisa menggunakan loop seperti for untuk memproses banyak elemen sekaligus:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<button onclick="ubahSemuaItem()">Ubah Semua Item</button>

<script>
    function ubahSemuaItem() {
        let items = document.getElementsByTagName("li");
        for (let i = 0; i < items.length; i++) {
            items[i].textContent = "Item " + (i + 1) + " telah diubah";
        }
    }
</script>

Setiap kali tombol diklik, teks dalam setiap <li> akan diperbarui.

Kesimpulan

  • HTMLCollection adalah kumpulan elemen HTML yang diperbarui secara dinamis.
  • item() memudahkan pengambilan elemen berdasarkan indeks, mirip dengan array.
  • Bisa digunakan dengan getElementsByTagName(), getElementsByClassName(), forms, images, dan links.
  • Berbeda dengan NodeList, karena HTMLCollection selalu diperbarui ketika DOM berubah.
  • Jika ingin mengakses semua elemen, gunakan loop seperti for karena HTMLCollection tidak mendukung .forEach() langsung.

Dengan memahami cara mengambil elemen HTML secara dinamis menggunakan item() dalam HTMLCollection, kita bisa membangun situs yang lebih responsif, cepat, dan interaktif!

Read next