Sign in Subscribe
Javascript

Menghitung Jumlah Elemen dalam Halaman dengan Length HTML Collection

Menghitung Jumlah Elemen dalam Halaman dengan Length HTML Collection
Photo by Pankaj Patel / Unsplash

Saat membuat aplikasi web, sering kali kita perlu menghitung jumlah elemen tertentu dalam halaman. Misalnya, kita ingin tahu berapa banyak paragraf (<p>), gambar (<img>), atau daftar (<li>) yang ada dalam dokumen. Untuk melakukan ini, kita bisa memanfaatkan HTMLCollection dan properti .length.

length adalah properti bawaan pada HTMLCollection, yang memungkinkan kita mengetahui jumlah elemen dalam kumpulan elemen yang diambil dari halaman. Dengan memahami cara menggunakannya, kita bisa memanipulasi elemen secara dinamis dan mengoptimalkan interaksi dalam web.

Artikel ini akan membahas cara menggunakan length dalam HTMLCollection, perbedaannya dengan NodeList, dan contoh penggunaan dalam pengembangan web interaktif.

Apa Itu HTMLCollection?

HTMLCollection adalah kumpulan elemen HTML yang diambil dari dokumen menggunakan metode seperti:

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

Setiap HTMLCollection memiliki properti .length, yang menunjukkan jumlah elemen dalam koleksi tersebut.

Cara Menggunakan .length dalam HTMLCollection

Properti .length sangat berguna untuk mengetahui jumlah elemen tanpa harus melakukan iterasi secara manual.

1. Menghitung Jumlah Elemen Berdasarkan Tag Name

<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<button onclick="hitungParagraf()">Hitung Paragraf</button>
<p id="hasil"></p>

<script>
    function hitungParagraf() {
        let paragraf = document.getElementsByTagName("p");
        document.getElementById("hasil").textContent = "Jumlah paragraf: " + paragraf.length;
    }
</script>

Saat tombol diklik, jumlah paragraf dalam halaman akan ditampilkan.

2. Menghitung Jumlah Elemen Berdasarkan Class Name

<div class="kotak">Kotak 1</div>
<div class="kotak">Kotak 2</div>
<div class="kotak">Kotak 3</div>
<button onclick="hitungKotak()">Hitung Kotak</button>
<p id="totalKotak"></p>

<script>
    function hitungKotak() {
        let kotak = document.getElementsByClassName("kotak");
        document.getElementById("totalKotak").textContent = "Jumlah kotak: " + kotak.length;
    }
</script>

Metode ini berguna jika kita ingin mengetahui jumlah elemen dalam kategori tertentu tanpa perlu menyeleksi satu per satu.

HTMLCollection vs NodeList

Banyak yang bingung dengan HTMLCollection dan NodeList karena terlihat mirip, tetapi ada beberapa perbedaan utama:

Fitur HTMLCollection NodeList
Dapat diperbarui secara dinamis? ✅ Ya ❌ Tidak
Mendukung .forEach()? ❌ Tidak ✅ Ya
Bisa dihitung dengan .length? ✅ Ya ✅ Ya
Bisa diakses dengan indeks? ✅ Ya ✅ Ya
Kesimpulan: Jika butuh koleksi elemen yang diperbarui secara otomatis ketika DOM berubah, gunakan HTMLCollection. Jika hanya butuh elemen statis, NodeList bisa menjadi pilihan yang lebih fleksibel.

Looping Elemen dengan .length

Karena HTMLCollection tidak mendukung .forEach() langsung, kita bisa menggunakan loop seperti for untuk mengiterasi semua elemen.

<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) + " diperbarui";
        }
    }
</script>

Dengan menggunakan .length dalam loop, kita bisa memanipulasi banyak elemen dengan mudah.

Keuntungan Menggunakan .length dalam HTMLCollection

✅ Cepat dan efisien – Menggunakan .length langsung pada HTMLCollection lebih cepat dibandingkan querySelectorAll().length.
✅ Otomatis diperbarui – Jika elemen dalam halaman berubah, .length akan langsung menyesuaikan.
✅ Bisa digunakan dalam berbagai elemen HTML – Seperti form, gambar, link, dan tabel.

Namun, ada beberapa keterbatasan: ❌ Tidak mendukung .forEach() langsung – Harus menggunakan loop for.
❌ Kurang fleksibel dibandingkan NodeList – Tidak memiliki metode modern seperti .map() atau .filter().

Kapan Harus Menggunakan .length dalam HTMLCollection?

✅ Jika ingin menghitung jumlah elemen di halaman secara real-time.
✅ Jika ingin memeriksa jumlah elemen sebelum melakukan aksi tertentu (misalnya, hanya menjalankan skrip jika ada elemen dalam halaman).
✅ Jika ingin melakukan loop untuk memanipulasi banyak elemen dalam koleksi.
❌ Jangan gunakan jika ingin metode seperti .forEach(), karena HTMLCollection tidak mendukungnya secara langsung.

Kesimpulan

  • HTMLCollection adalah kumpulan elemen HTML yang diperbarui secara otomatis saat DOM berubah.
  • Properti .length digunakan untuk mengetahui jumlah elemen dalam koleksi.
  • Bisa digunakan dengan getElementsByTagName(), getElementsByClassName(), forms, images, dan links.
  • Berbeda dengan NodeList, karena HTMLCollection selalu diperbarui ketika DOM berubah.
  • Gunakan loop for untuk memproses elemen karena HTMLCollection tidak mendukung .forEach().

Dengan memahami cara menggunakan .length dalam HTMLCollection, kita bisa membuat halaman web yang lebih dinamis, cepat, dan efisien! 🚀

Read next