Menyeleksi Elemen DOM dengan getElementByClassName()

Dalam JavaScript, kita sering perlu mengambil dan memanipulasi elemen di dalam halaman web. Salah satu metode yang bisa digunakan untuk menyeleksi elemen berdasarkan class adalah getElementsByClassName().

Metode ini mengembalikan HTMLCollection, yaitu kumpulan elemen yang memiliki class yang sama. Dengan metode ini, kita bisa dengan mudah mengambil dan mengubah elemen-elemen yang berbagi class yang sama.

Cara Kerja getElementsByClassName()

getElementsByClassName() adalah metode yang digunakan untuk mengambil semua elemen yang memiliki class tertentu dalam halaman web.

Sintaks Dasar

document.getElementsByClassName("nama-class");

• document → Merepresentasikan seluruh halaman web.
• getElementsByClassName("nama-class") → Mengembalikan kumpulan elemen dengan class yang sesuai.

Karena metode ini mengembalikan HTMLCollection, kita harus menggunakan loop atau mengonversinya ke array untuk memanipulasi setiap elemen.

Contoh Penggunaan getElementsByClassName()

1. Menyeleksi Elemen dan Mengubah Kontennya

Misalnya, kita punya elemen HTML berikut:

<p class="teks">Ini adalah paragraf pertama.</p>
<p class="teks">Ini adalah paragraf kedua.</p>
<p class="teks">Ini adalah paragraf ketiga.</p>

Kita bisa mengubah konten semua elemen dengan class teks menggunakan JavaScript:

const elemenTeks = document.getElementsByClassName("teks");
for (let i = 0; i < elemenTeks.length; i++) {
    elemenTeks[i].innerHTML = `Paragraf ${i + 1} telah diubah!`;
}

Setiap elemen <p> yang memiliki class teks akan diubah menjadi:

<p class="teks">Paragraf 1 telah diubah!</p>
<p class="teks">Paragraf 2 telah diubah!</p>
<p class="teks">Paragraf 3 telah diubah!</p>

2. Mengubah Warna Semua Elemen dengan Class Tertentu

Kita juga bisa mengubah tampilan elemen, misalnya mengubah warna teksnya.

const elemenTeks = document.getElementsByClassName("teks");
for (let i = 0; i < elemenTeks.length; i++) {
    elemenTeks[i].style.color = "blue";
}

Setelah kode ini dijalankan, semua teks dalam elemen dengan class teks akan berubah menjadi biru.

3. Menampilkan atau Menyembunyikan Elemen dengan Class Tertentu

Kadang kita ingin menyembunyikan elemen-elemen dengan class tertentu saat tombol diklik.

HTML:

<button id="sembunyikan">Sembunyikan Paragraf</button>
<p class="teks">Paragraf pertama.</p>
<p class="teks">Paragraf kedua.</p>

JavaScript:

document.getElementById("sembunyikan").addEventListener("click", function() {
    const elemenTeks = document.getElementsByClassName("teks");
    for (let i = 0; i < elemenTeks.length; i++) {
        elemenTeks[i].style.display = "none";
    }
});

Ketika tombol diklik, semua elemen dengan class teks akan disembunyikan dari tampilan.

4. Mengubah Beberapa Elemen dengan Looping

Kita bisa memanfaatkan loop seperti forEach() untuk mengubah setiap elemen dalam koleksi getElementsByClassName() dengan cara mengonversinya ke array.

const elemenTeks = document.getElementsByClassName("teks");
Array.from(elemenTeks).forEach(elemen => {
    elemen.style.fontWeight = "bold";
});

Setelah kode ini dijalankan, semua paragraf dalam class teks akan menjadi bold.

Perbedaan getElementsByClassName() vs querySelectorAll()

Kapan Menggunakan getElementsByClassName()?

✅ Jika hanya perlu menyeleksi elemen berdasarkan class.
✅ Jika ingin mendapatkan kumpulan elemen yang dinamis (berubah seiring waktu).
✅ Jika ingin performa lebih cepat dibanding querySelectorAll() dalam beberapa kasus.

Kesimpulan

• getElementsByClassName() digunakan untuk menyeleksi semua elemen dalam halaman web yang memiliki class tertentu.
• Metode ini mengembalikan HTMLCollection, jadi kita harus menggunakan loop (for, forEach) untuk memanipulasinya.
• Bisa digunakan untuk mengubah konten, gaya elemen, menampilkan/menyembunyikan elemen, dan menambahkan efek interaktif.
• Berbeda dengan querySelectorAll(), getElementsByClassName() hanya bekerja dengan class dan tidak mendukung selector kompleks.

Dengan memahami getElementsByClassName(), kamu bisa lebih mudah dalam mengontrol elemen-elemen di dalam halaman web. Yuk, langsung coba di proyekmu!