Pada tutorial sebelumnya, kita sudah mempelajari tentang JavaScript DOM Bagian 3 : Cara Menggunakan getElementsByTagName di JavaScript.
Dalam tutorial ini, kita akan mempelajari cara menggunakan metode JavaScript getElementsByName() untuk mendapatkan elemen dengan nama tertentu dalam dokumen.
Pengantar metode JavaScript getElementsByName()
Setiap elemen pada dokumen HTML mungkin memiliki atribut nama :
<input type="radio" name="bahasa" value="JavaScript">Berbeda dengan atribut id, beberapa elemen HTML dapat berbagi nilai atribut nama yang sama seperti ini :
<input type="radio" name="bahasa" value="JavaScript">
<input type="radio" name="bahasa" value="TypeScript">Untuk mendapatkan semua elemen dengan nama tertentu, Anda menggunakan metode getElementsByName() dari objek dokumen :
let element = document.getElementsByName(name);getElementsByName() menerima nama yang merupakan nilai dari atribut nama elemen dan mengembalikan elemen NodeList langsung.
Pengumpulan kembali elemen adalah langsung. Ini berarti bahwa elemen yang dikembalikan diperbarui secara otomatis ketika elemen dengan nama yang sama dimasukkan dan/atau dihapus dari dokumen.
Contoh JavaScript getElementsByName()
Contoh berikut menunjukkan grup radio yang terdiri dari tombol radio yang memiliki nama (tingkat) yang sama.
Saat Anda memilih tombol radio dan mengklik tombol kirim, halaman akan menampilkan nilai yang dipilih seperti Sangat Buruk, Buruk, Oke, Baik, atau Sangat Baik :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo JavaScript getElementsByName</title>
</head>
<body>
<p>Silakan menilai layanan ini:</p>
<p>
<label for="sangat-buruk">
<input type="radio" name="nilai" value="Sangat buruk" id="sangat buruk">Sangat buruk
</label>
<label for = "buruk">
<input type="radio" name="nilai" value="Buruk" id="buruk">Buruk
</label>
<label for = "oke">
<input type="radio" name="nilai" value="Oke" id="oke">Oke
</label>
<label for = "baik">
<input type="radio" name="nilai" value="Baik">Baik
</label>
<label for ="sangat-baik">
<input type="radio" name="nilai" value="Sangat Baik" id="Sangat baik">Sangat Baik
</label>
</p>
<p>
<button id="tmblNilai">Kirim</button>
</p>
<p id="hasil"></p>
<script>
let btn = document.getElementById('tmblNilai');
let output = document.getElementById('hasil');
btn.addEventListener('click', () => {
let penilaian = document.getElementsByName('nilai');
penilaian.forEach((nilai) => {
if (nilai.checked) {
output.innerText = `Anda memilih: ${nilai.value}`;
}
});
});
</script>
</body>
</html>Bagaimana kode ini bekerja:
- Pertama, pilih tombol submit dengan id tmblNilai menggunakan metode getElementById().
- Kedua, dengarkan event click lewat tombol kirim.
- Ketiga, dapatkan semua nilai tombol radio menggunakan getElementsByName() dan tampilkan nilai yang dipilih di elemen keluaran.
- Anda akan belajar tentang event seperti click pada materi tutorial berikutnya. Untuk saat ini, silahkan fokus pada metode getElementsByName().
Kesimpulan
- getElementsByName() mengembalikan elemen NodeList langsung dengan nama yang ditentukan.
- NodeList adalah objek seperti array, bukan objek array.
Itu dia tutorial belajar JavaScript DOM, cara menggunakan metode getElementsByName di JavaScript untuk mendapatkan elemen dengan nama tertentu.
