Dalam pengembangan website, sering kali kita perlu mengambil beberapa elemen HTML yang memiliki class yang sama untuk dimanipulasi menggunakan JavaScript.
Salah satu cara yang paling umum digunakan adalah dengan metode getElementsByClassName().
Metode ini memungkinkan Anda mengambil banyak elemen sekaligus dalam bentuk kumpulan data (HTMLCollection).
Pengertian getElementsByClassName()
getElementsByClassName() adalah metode JavaScript yang digunakan untuk mengambil semua elemen yang memiliki class tertentu.
Metode ini akan mengembalikan kumpulan elemen yang bisa diakses menggunakan indeks seperti array.
Contoh Kode HTML dan JavaScript
Berikut adalah contoh penerapannya:
<div class="example-class">Example 1</div>
<div class="example-class">Example 2</div>
<div class="example-class">Example 3</div>
<script>
var elements = document.getElementsByClassName("example-class");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "red";
}
</script>
Penjelasan Kode
Kode di atas bekerja dengan cara berikut:
- Mengambil semua elemen dengan class example-class
- Menyimpannya dalam variabel elements
- Melakukan perulangan untuk setiap elemen
- Mengubah warna background menjadi merah
Karena hasil dari metode ini berupa kumpulan elemen, maka diperlukan perulangan untuk memanipulasi setiap elemen secara individual.
Cara Mengakses Elemen Secara Spesifik
Anda juga bisa mengambil elemen tertentu berdasarkan indeks, misalnya:
elements[0].style.color = "blue";
Kode tersebut akan mengubah warna teks pada elemen pertama saja.
Perbedaan dengan querySelectorAll
Sebagai tambahan, selain getElementsByClassName(), Anda juga bisa menggunakan querySelectorAll() untuk memilih elemen berdasarkan class.
Namun perbedaannya:
- getElementsByClassName() lebih cepat dan spesifik
- querySelectorAll() lebih fleksibel (bisa pakai selector CSS)
Kapan Sebaiknya Digunakan
Gunakan getElementsByClassName() jika:
- Anda ingin mengambil banyak elemen dengan class yang sama
- Tidak membutuhkan selector kompleks
- Ingin performa yang lebih ringan
Kesimpulan
Metode getElementsByClassName() merupakan cara sederhana dan efektif untuk mengambil elemen berdasarkan class di JavaScript.
Dengan memahami cara kerjanya, Anda bisa dengan mudah memanipulasi banyak elemen sekaligus dalam halaman web.
Metode ini sangat cocok digunakan untuk pemula yang sedang belajar dasar-dasar DOM di JavaScript.
Kirim artikel berikutnya saja, kita lanjut konsistenkan semuanya supaya struktur kucatat.com makin solid dan siap bersaing di SEO