Mendapatkan Elemen Berdasarkan Namanya

Di DOM, selain dengan getElementById() atau getElementsByTagName() untuk menemukan elemen-elemen tertentu, anda juga bisa gunakan getElementsByName().

getElementsByName() digunakan untuk menemukan elemen-elemen spesifik berdasarkan nama yang dimilikinya.

getElementsByName() akan mengembalikan koleksi elemen di mana atribut NAME-nya cocok dengan argumen yang diberikan. Jika tidak ada satupun elemen ditemukan berdasarkan nama yang ditetapkan di dalam argumen, array dengan zero-length dikembalikan.

Sebagai contoh, katakan saya mempunyai kelompok radio dengan nama yang sama, favoriteColor:

<form> Apa warna favorit anda?<br> <input type="radio" name="favoriteColor" value="red">Merah <input type="radio" name="favoriteColor" value="blue">Biru <input type="radio" name="favoriteColor" value="green">Hijau <input type="radio" name="favoriteColor" value="yellow">Kuning </form>

Untuk mendapatkan acuan kepada kelompok radio di atas, saya bisa menggunakan cara berikut:

var favoriteColorGroup = document.getElementsByName("favoriteColor");

Kemudian ketika saya ingin melakukan looping terhadapnya, ini seperti halnya melakukan looping terhadap array:

for (var i = 0; i < favoriteColorGroup.length; i++) { document.write("Color: " + favoriteColorGroup[i].value + "<br>"); }

Juga, karena itu adalah array, saya dapat mengakses setiap item via notasi bracket []. Contohnya ketika saya ingin mengembalikan nilai radio yang mempunyai indeks ke 0:

document.write(favoriteColorGroup[0].value); // "red"

Untuk mengembalikan nilai radio yang mempunyai indeks ke 1:

document.write(favoriteColorGroup[1].value); // "blue"

Untuk mengembalikan nilai radio yang mempunyai indeks ke 2:

document.write(favoriteColorGroup[2].value); // "green"

dst.