DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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.

2 Contoh Penggunaan Method getElementsByName() DOM pada HTML
Ilustrasi getElementsByName DOM HTML

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




Komentar

  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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas