Lompat ke konten Lompat ke sidebar Lompat ke footer

Mendapatkan Nama Elemen HTML Menggunakan getElementsByName DOM

Method getElementsByName() berfungsi untuk mengembalikan collection dari semua elemen tertentu berdasarkan namanya. Koleksi ini memanggil daftar node dan setiap elemen dari daftar node dapat dikunjungi dengan bantuan dari indeks.


Sebelum memahami lebih dalam materi tentang Mendapatkan Nama Elemen HTML Menggunakan getElementsByName DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Nama Class HTML getElementsByClassName DOM, Mendapatkan ID Elemen HTML Menggunakan getElementById DOM, dan Tampilan Layar Penuh HTML fullscreenEnabled DOM.

Sintak: document.getElementsByName(name)

Parameter: fungsi ini menerima nama dari dokumen.

Baca Juga:

Tipe Return: fungsi ini mengembalikan collection dari elemen.

Catatan: dengan menggunakan method length, maka dapat ditemukan total dari elemen yang ditampilkan di dalam elemen tertentu. Namun, jika method getElementByName() tidak ada, maka method yang dapat digunakan adalah getElementsByName(), dengan tambahan huruf 's'.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

getElementsByName() DOM

</title>

 

<style>

body 

{

text-align: center;}

 

h1 

{

color: green;}

</style>

 

<script>

// membuat fungsi untuk menampilkan angka dari elemen pada nama tertentu

function bons() 

{

// Mengambil daftar dari nama elemen bawah 'ga'

var x = document.getElementsByName("ga");

// Mencetak angka dari elemen didalam tag alert

alert("Total element dengan nama ga adalah: " + x.length);

}

</script>

</head>

 

<body>

<h1>

Blog Elfan

</h1>

 

<h2>

Method getElementsByName() DOM

</h2>

 

<!-- Menciptakan tag dengan nama 'ga' -->

<h4 

name="ga">

makan

</h4>

 

<h4 name="ga">

dan

</h4>

 

<h4 name="ga">

minum

</h4>

 

<input 

type="button" 

onclick="bons()"

value="Klik Disini" />

 

</body>

 

</html>

Output:

Blog Elfan

Method getElementsByName() DOM

makan

dan

minum



Karena method document.getElementsByName() mengembalikan nilai array yang mengandung object, maka jika ingin mendapatkan nilai dari object apapun harus menggunakan document.getElementsByName(“element_name”)[index].value. Jika tidak, maka akan didapatkan hasil yang tidak terdefinisi.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

getElementsByName() DOM

</title>

 

<style>

body 

{

text-align: center;}

 

h1 

{

color: green;}

</style>

 

<script>

// Membuat fungsi untuk 

// menampilkan elemen pada 

// nama tertentu

function bons() 

{

// Baris ini akan mencetak 

// hasil masukkan

alert(document.getElementsByName("ga")[0].value);

}

</script>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Method getElementsByName() DOM

</h2>

 

<!-- Mencetak tag input -->

<input 

type="text" 

name="ga" />

 

<br>

<br>

 

<!-- Fungsi akan dipanggil 

ketika tombol di klik -->

<input 

type="button" 

onclick="bons()"

value="Klik Disini" />

 

<p></p>

 

</body>

 

</html>

Output:

Blog Elfan

Method getElementsByName() DOM




Artikel ini didedikasikan kepada: Atharaditya Yumna Yafi, Aulia Listyaningrum, Aulina Fatimatul Putri Nur Carmelita, Avina Damayanti, dan Bahtiar Hendrawan Pradipta.

5 komentar untuk "Mendapatkan Nama Elemen HTML Menggunakan getElementsByName DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method getElementsByName pada DOM HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method getElementsByName() pada dom html:
      1. Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa fungsi method getElementsByName() pada dom html?

    BalasHapus
    Balasan
    1. Method getElementsByName() berfungsi untuk mengembalikan kumpulan semua elemen dalam dokumen dengan nama yang telah ditentukan pada nilai atribut name, sebagai bagian dari object HTMLCollection. Object HTMLcollection mewakili kumpulan node, dimana node tersebut dapat diakses melalu nomor indeks.

      Hapus
    2. Method getElementsByName() dari object dokumen mengembalikan kumpulan elemen NodeList beserta nama atribut yang diberikan didalam dokumen tersebut.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -