Pada tutorial sebelumnya,kita sudah mempelajari tentang JavaScript DOM Bagian 2 : Cara Menggunakan getElementById di JavaScript. Dalam tutorial ini, kita akan mempelajari cara menggunakan JavaScript getElementsByTagName() untuk memilih elemen dengan nama tag tertentu.
Pengantar metode JavaScript getElementsByTagName()
getElementsByTagName() adalah metode objek dokumen atau elemen DOM tertentu.
Metode getElementsByTagName() menerima nama tag dan mengembalikan elemen HTMLCollection langsung dengan nama tag yang cocok sesuai urutan kemunculannya di dokumen.
Berikut ini ilustrasi dar sintaks getElementsByTagName() :
let element = document.getElementsByTagName(tagName);Kumpulan pengembalian nilai dari getElementsByTagName() bersifat langsung, artinya diperbarui secara otomatis ketika elemen dengan nama tag yang cocok ditambahkan dan/atau dihapus dari dokumen.
Perhatikan bahwa HTMLCollection adalah objek seperti array, seperti objek argumen dari suatu function.
Contoh JavaScript getElementsByTagName()
Contoh berikut mengilustrasikan cara menggunakan metode getElementsByTagName() untuk mendapatkan jumlah tag H2 dalam dokumen.
Saat Anda mengklik tombol Hitung H2, halaman menampilkan jumlah tag H2 :
<!DOCTYPE html>
<html>
<head>
<title>Demo JavaScript getElementsByTagName()</title>
</head>
<body>
<h1>Demo JavaScript getElementsByTagName()</h1>
<h2>Judul pertama</h2>
<p>Ini adalah paragraf pertama.</p>
<h2>Judul kedua</h2>
<p>Ini adalah paragraf kedua.</p>
<h2>Judul ketiga</h2>
<p>Ini adalah paragraf ketiga.</p>
<button id="tmblHitung">Hitung H2</button>
<script>
let tombol = document.getElementById('tmblHitung');
tombol.addEventListener('click', () => {
let judul = document.getElementsByTagName('h2');
alert(`Jumlah tag H2: ${judul.length}`);
});
</script>
</body>
</html>Bagaimana kode ini bekerja:
- Pertama, pilih tombol Hitung H2 dengan menggunakan metode getElementById().
- Kedua, kaitkan event klik tombol ke anonymous function.
- Ketiga, dengan menggunakan anonymous function, gunakan document.getElementsByTagName() untuk mendapatkan daftar tag H2.
- Terakhir, tampilkan jumlah tag H2 menggunakan fungsi alert().
Kesimpulan
- getElementsByTagName() adalah metode objek dokumen atau elemen.
- getElementsByTagName() mencari nama tag dan mengembalikan daftar elemen dengan nama tag yang cocok.
- getElementsByTagName() mengembalikan elemen HTMLCollection langsung. HTMLCollection adalah objek seperti array.
Itu dia cara menggunakan metode getElementByTagName di JavaScript untuk menyeleksi elemen berdasarkan nama tag tertentu.
0 Komentar