Menyeleksi Elemen DOM dengan getElementByTagName()

Dalam JavaScript, kita sering perlu menyeleksi elemen dalam halaman web berdasarkan tag tertentu. Salah satu metode yang dapat digunakan adalah getElementsByTagName(). Metode ini mengembalikan HTMLCollection, yaitu kumpulan elemen dengan tag yang sesuai, memungkinkan kita untuk mengambil, mengubah, atau memanipulasi banyak elemen dalam satu operasi.

Cara Kerja getElementsByTagName()

Metode getElementsByTagName() mengambil semua elemen berdasarkan nama tag tertentu.

Sintaks Dasar

document.getElementsByTagName("nama-tag");

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

Karena metode ini mengembalikan HTMLCollection, kita perlu menggunakan loop atau mengonversinya ke array untuk memanipulasi elemen-elemen tersebut.

Contoh Penggunaan getElementsByTagName()

1. Menyeleksi Elemen dan Mengubah Kontennya

Misalnya, kita memiliki beberapa elemen paragraf dalam HTML:

<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
<p>Ini adalah paragraf ketiga.</p>

Kita bisa mengubah isi semua paragraf (<p>) menggunakan JavaScript:

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

Setelah kode dijalankan, isi setiap paragraf akan berubah menjadi:

<p>Paragraf 1 telah diubah!</p>
<p>Paragraf 2 telah diubah!</p>
<p>Paragraf 3 telah diubah!</p>

2. Mengubah Gaya Semua Elemen dengan Tag Tertentu

Kita bisa mengubah tampilan semua elemen berdasarkan tag yang sama.

const paragraf = document.getElementsByTagName("p");
for (let i = 0; i < paragraf.length; i++) {
    paragraf[i].style.color = "red";
    paragraf[i].style.fontWeight = "bold";
}

Setelah kode ini dijalankan, semua teks dalam <p> akan menjadi merah dan tebal.

3. Menampilkan atau Menyembunyikan Elemen dengan Tag Tertentu

Kita juga bisa menggunakan metode ini untuk menyembunyikan atau menampilkan elemen tertentu dengan mudah.

HTML:

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

JavaScript:

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

Ketika tombol diklik, semua elemen <p> akan disembunyikan dari tampilan.

4. Mengubah Beberapa Elemen dengan Looping

Kita juga bisa mengonversi HTMLCollection ke array dan menggunakan metode forEach() untuk lebih memudahkan manipulasi elemen.

const paragraf = document.getElementsByTagName("p");
Array.from(paragraf).forEach(elemen => {
    elemen.style.backgroundColor = "yellow";
});

Setelah kode ini dijalankan, semua elemen <p> akan memiliki background kuning.

Perbedaan getElementsByTagName() vs querySelectorAll()

Kapan Menggunakan getElementsByTagName()?

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

Kesimpulan

• getElementsByTagName() digunakan untuk menyeleksi semua elemen berdasarkan nama tag dalam halaman web.
• Metode ini mengembalikan HTMLCollection, sehingga perlu menggunakan loop (for, forEach) untuk memanipulasi elemen-elemen di dalamnya.
• Bisa digunakan untuk mengubah konten, mengatur gaya elemen, menyembunyikan/menampilkan elemen, dan membuat efek interaktif.
• Berbeda dengan querySelectorAll(), getElementsByTagName() hanya bekerja dengan nama tag dan tidak mendukung selector kompleks.

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