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.
Sintak: document.getElementsByName(name)
Parameter: Fungsi ini menerima nama dari dokumen.
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.
Parameter: Fungsi ini menerima nama dari dokumen.
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:
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.
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
Pengelolaan elemen-elemen dalam sebuah halaman web merupakan bagian integral dalam pengembangan web. Salah satu cara untuk mengakses elemen-elemen tersebut adalah dengan menggunakan berbagai metode yang disediakan oleh antarmuka pemrograman aplikasi dokumen objek model (DOM). Salah satu metode yang dapat digunakan untuk mendapatkan elemen-elemen tersebut adalah dengan menggunakan metode getElementsByName. Metode ini memungkinkan pengakses untuk memperoleh elemen-elemen berdasarkan atribut nama.
Dalam konteks pemrograman web, elemen-elemen dalam dokumen HTML sering kali dilabeli dengan nama tertentu. Atribut nama pada elemen-elemen ini memungkinkan pengakses untuk merujuk pada elemen-elemen yang relevan secara lebih spesifik. Atribut nama ini dapat digunakan pada berbagai elemen HTML, seperti formulir input, grup radio, dan elemen formulir lainnya. Dengan metode getElementsByName, pemrogram dapat dengan mudah mendapatkan referensi ke elemen-elemen tersebut dengan nama yang telah ditentukan.
Metode getElementsByName mengembalikan koleksi elemen-elemen yang memiliki atribut nama yang cocok dengan nama yang diberikan. Koleksi ini bersifat dinamis, artinya jika elemen-elemen di dalam dokumen berubah, koleksi ini akan mencerminkan perubahan tersebut. Hal ini memudahkan pengelolaan elemen-elemen yang dinamakan dalam suatu dokumen HTML tanpa harus melakukan pencarian manual atau perulangan berulang.
Namun, penting untuk dicatat bahwa metode ini mengembalikan koleksi elemen-elemen yang memiliki nama yang sama. Artinya, jika terdapat beberapa elemen dengan atribut nama yang serupa, semua elemen tersebut akan dimasukkan dalam koleksi hasil dari metode ini. Koleksi yang dihasilkan bersifat seperti array, yang berarti elemen-elemennya dapat diakses melalui indeks numerik. Walaupun demikian, koleksi ini bukanlah array yang sesungguhnya, melainkan koleksi dari elemen-elemen DOM yang dapat diakses melalui berbagai metode.
Baca Juga:
Ketika menggunakan metode getElementsByName, pengakses dapat memperoleh elemen-elemen berdasarkan nama yang telah ditetapkan pada atribut nama elemen tersebut. Atribut nama ini biasanya digunakan pada elemen formulir, seperti input teks, radio, dan pilihan pilihan lainnya. Misalnya, jika terdapat elemen formulir dengan nama yang sama, pengakses dapat mengakses seluruh elemen-elemen tersebut dalam satu langkah dengan menggunakan nama yang diberikan.
Selain itu, penggunaan getElementsByName juga berguna ketika elemen-elemen tersebut tidak dapat diakses menggunakan metode lainnya, seperti getElementById atau getElementsByClassName. Karena metode ini bekerja dengan nama elemen, pengakses dapat memperoleh elemen-elemen yang bersifat serupa atau terkait secara langsung tanpa memerlukan id atau kelas khusus. Hal ini menjadikannya sangat berguna ketika bekerja dengan elemen-elemen dalam bentuk grup, seperti tombol radio atau pilihan dalam formulir.
Dalam prakteknya, metode ini sangat berguna terutama ketika berurusan dengan elemen-elemen formulir atau kontrol pengguna yang memiliki nama serupa. Misalnya, pada formulir yang berisi beberapa pilihan radio, seluruh pilihan radio tersebut dapat diakses menggunakan metode ini hanya dengan merujuk pada nama elemen radio tersebut. Dengan cara ini, pengakses dapat mengubah nilai atau mengambil data dari elemen-elemen tersebut tanpa harus mengaksesnya satu per satu menggunakan metode lain.
Namun, meskipun metode ini sangat berguna, ada beberapa keterbatasan yang perlu dipertimbangkan. Salah satu keterbatasannya adalah bahwa getElementsByName hanya mengembalikan elemen-elemen yang memiliki atribut nama yang cocok dengan parameter yang diberikan. Oleh karena itu, jika elemen-elemen tersebut tidak memiliki atribut nama atau memiliki nama yang berbeda, maka hal tersebut tidak akan dimasukkan dalam koleksi hasil pencarian.
Selain itu, meskipun koleksi hasil dari getElementsByName bisa diperlakukan seperti array, ia tidak sepenuhnya setara dengan array JavaScript. Koleksi ini tidak memiliki beberapa metode atau properti yang tersedia pada array biasa, seperti metode forEach atau map. Oleh karena itu, jika ingin memanipulasi elemen-elemen tersebut lebih lanjut, pengakses mungkin perlu menggunakan metode lain untuk mengubah koleksi ini menjadi array JavaScript yang sesungguhnya.
Dalam beberapa kasus, pengakses mungkin perlu menambahkan logika tambahan untuk memeriksa elemen-elemen dalam koleksi yang dihasilkan oleh getElementsByName. Hal ini diperlukan terutama ketika bekerja dengan grup elemen yang memiliki nama yang sama, seperti grup radio. Dalam kasus seperti ini, pengakses perlu memastikan bahwa elemen yang dipilih atau dimanipulasi adalah elemen yang benar, baik dengan memeriksa nilai elemen tersebut atau dengan menggunakan metode lain untuk mempersempit seleksi.
Secara keseluruhan, getElementsByName merupakan metode yang sangat berguna dalam pengelolaan elemen-elemen dalam dokumen HTML, terutama ketika bekerja dengan elemen-elemen formulir atau elemen-elemen lain yang memiliki nama serupa. Dengan kemampuan untuk mengakses seluruh elemen yang memiliki nama yang sama, pengakses dapat dengan mudah mengelola data atau interaksi dengan elemen-elemen tersebut dalam halaman web. Meskipun demikian, seperti halnya metode lainnya, penting untuk memahami keterbatasan dan cara penggunaannya dengan bijak agar dapat memaksimalkan fungsionalitasnya dalam pengembangan aplikasi web.
Dalam pengembangan web, memahami berbagai metode yang tersedia dalam DOM menjadi hal yang penting, terutama dalam pengelolaan elemen-elemen dinamis. getElementsByName adalah salah satu metode yang menawarkan kemudahan dalam mengakses elemen-elemen berdasarkan nama. Meskipun terdapat keterbatasan dalam penggunaannya, metode ini tetap menjadi pilihan yang sangat berguna dalam skenario tertentu, terutama dalam aplikasi web yang melibatkan formulir atau kontrol pengguna lainnya.
Selain itu, penting untuk menyadari bahwa meskipun getElementsByName mengembalikan koleksi elemen yang memiliki nama yang sama, tidak semua elemen HTML memiliki atribut nama. Oleh karena itu, untuk elemen-elemen yang tidak memiliki atribut nama, metode ini tidak akan dapat digunakan. Dalam hal ini, metode lain seperti getElementById atau getElementsByClassName mungkin lebih sesuai. Namun, bagi elemen-elemen yang memiliki atribut nama, getElementsByName menjadi pilihan yang sangat efektif dan efisien dalam mengakses dan memanipulasi elemen-elemen tersebut.
Pada akhirnya, pemahaman yang mendalam tentang bagaimana metode getElementsByName bekerja dalam konteks DOM dapat memberikan keuntungan besar bagi pengembang web dalam mengelola elemen-elemen pada halaman web. Dengan memanfaatkan metode ini secara tepat, pengembang dapat menciptakan aplikasi web yang lebih dinamis, interaktif, dan mudah digunakan.
Dengan menggunakan metode getElementsByName, pengelolaan elemen-elemen dalam aplikasi web menjadi lebih terstruktur dan efisien. Terlebih lagi, dalam aplikasi web yang melibatkan interaksi pengguna dengan formulir, metode ini dapat membantu mengakses elemen-elemen yang memiliki nama serupa tanpa memerlukan pencarian yang rumit atau memanfaatkan identifikasi melalui id atau kelas. Misalnya, dalam situasi dimana sebuah formulir berisi beberapa grup radio yang memiliki nama yang sama, metode ini dapat digunakan untuk mengakses dan memanipulasi seluruh elemen radio tersebut dalam satu langkah.
Namun demikian, meskipun metode ini memberikan kemudahan dalam beberapa situasi, penggunaan getElementsByName perlu dipertimbangkan dengan cermat agar dapat menghindari potensi masalah dalam pengelolaan elemen-elemen yang memiliki nama serupa. Salah satu tantangan yang mungkin dihadapi adalah ketika elemen-elemen dengan nama yang sama memiliki tipe atau tujuan yang berbeda, yang dapat menyebabkan kebingungannya pengelolaan data atau nilai elemen. Dalam hal ini, pengembang perlu menggunakan logika tambahan untuk memverifikasi dan memisahkan elemen-elemen yang relevan.
Sebagai contoh, dalam aplikasi formulir yang memiliki beberapa grup radio dengan nama yang sama, pengembang dapat menambahkan logika yang memeriksa nilai dari setiap elemen radio untuk menentukan pilihan mana yang dipilih oleh pengguna. Hal ini diperlukan agar interaksi dengan elemen-elemen tersebut berjalan dengan baik dan data yang diperoleh sesuai dengan yang diharapkan. Selain itu, jika ada lebih dari satu elemen dengan nama yang sama yang memerlukan penanganan yang berbeda, pengembang dapat memanfaatkan indeks atau urutan elemen dalam koleksi yang dihasilkan oleh getElementsByName untuk mengidentifikasi elemen-elemen yang spesifik.
Penggunaan metode getElementsByName dalam pengembangan aplikasi web juga dapat memperkaya pengalaman pengguna. Dengan kemampuannya untuk mengakses elemen-elemen berdasarkan nama, metode ini memungkinkan pengembang untuk membuat interaksi dengan elemen-elemen formulir yang lebih dinamis dan responsif. Misalnya, pengembang dapat menggunakan metode ini untuk mengubah atau memanipulasi nilai elemen formulir secara langsung, memberikan umpan balik instan kepada pengguna, atau memperbarui elemen lain berdasarkan pilihan yang dibuat oleh pengguna dalam grup radio atau pilihan lainnya.
Selain itu, metode getElementsByName juga berguna dalam situasi dimana elemen-elemen formulir memiliki nama yang sangat mirip, tetapi digunakan untuk tujuan yang berbeda. Dalam hal ini, pengembang dapat menggunakan nama elemen untuk membedakan antara grup radio yang berbeda, kolom isian teks, atau pilihan-pilihan lain yang memiliki nama yang serupa. Dengan demikian, meskipun elemen-elemen tersebut terlihat mirip, metode ini memungkinkan pengembang untuk secara efektif memisahkan dan memanipulasi elemen-elemen sesuai dengan fungsinya masing-masing.
Salah satu hal penting yang perlu diperhatikan adalah bahwa koleksi yang dikembalikan oleh metode getElementsByName bersifat langsung dan dapat diubah. Artinya, jika elemen-elemen dalam halaman berubah seiring waktu, koleksi ini akan mencerminkan perubahan tersebut tanpa perlu memperbarui referensinya secara manual. Hal ini memberikan fleksibilitas bagi pengembang untuk menangani elemen-elemen yang bersifat dinamis atau berubah dalam waktu tertentu, tanpa harus mencari ulang atau menginisialisasi koleksi tersebut.
Namun, keterbatasan lainnya yang perlu dipahami adalah bahwa koleksi hasil dari getElementsByName tidak sepenuhnya mendukung metode atau sifat yang dimiliki oleh array JavaScript standar. Oleh karena itu, jika pengembang membutuhkan metode atau manipulasi array khusus yang tidak tersedia pada koleksi ini, pengembang dapat mengkonversi koleksi tersebut menjadi array JavaScript menggunakan berbagai teknik lain. Salah satu caranya adalah dengan menggunakan metode Array.prototype.slice, yang dapat mengubah koleksi dinamis menjadi array biasa yang dapat dimanipulasi lebih lanjut dengan cara yang lebih fleksibel.
Pengembang juga harus memastikan bahwa pengembang memahami cara kerja koleksi yang dikembalikan oleh metode ini, terutama ketika berurusan dengan elemen-elemen dalam jumlah besar. Misalnya, jika halaman web berisi ratusan elemen dengan nama yang sama, koleksi yang dihasilkan oleh getElementsByName dapat mencakup ratusan elemen yang harus dikelola dan diperiksa satu per satu. Dalam situasi seperti ini, pengembang dapat memanfaatkan loop atau metode lainnya untuk melakukan iterasi melalui koleksi dan memanipulasi elemen-elemen yang sesuai.
Keuntungan besar dari penggunaan getElementsByName adalah kesederhanaannya dalam mengakses grup elemen yang memiliki nama yang sama. Misalnya, dalam formulir yang berisi beberapa pilihan radio dengan nama yang sama, metode ini memungkinkan pengembang untuk mengakses semua elemen tersebut dengan sekali panggil tanpa harus mengaksesnya satu per satu. Hal ini sangat membantu dalam skenario dimana elemen-elemen tersebut perlu dimodifikasi atau diperiksa berdasarkan pilihan pengguna atau status elemen lainnya.
Dalam praktiknya, meskipun metode getElementsByName sangat berguna dalam banyak kasus, pengembang perlu mempertimbangkan apakah metode ini adalah pilihan terbaik dalam konteks aplikasi yang sedang dikembangkan. Misalnya, jika elemen-elemen dalam halaman memiliki id atau kelas unik, mungkin lebih baik untuk menggunakan metode lain, seperti getElementById atau getElementsByClassName, yang memungkinkan pengaksesan elemen-elemen dengan cara yang lebih langsung dan spesifik. Oleh karena itu, pengembang harus mengevaluasi kebutuhan aplikasi dan memilih metode yang paling sesuai dengan tujuan.
Dengan demikian, penggunaan getElementsByName merupakan salah satu cara yang efektif dalam mengelola dan memanipulasi elemen-elemen dalam dokumen HTML. Metode ini sangat berguna dalam aplikasi yang melibatkan elemen-elemen formulir atau kontrol pengguna lainnya yang memiliki nama yang serupa. Dengan memahami cara kerja metode ini, pengembang dapat dengan mudah mengakses dan mengelola elemen-elemen tersebut, memastikan bahwa interaksi pengguna dengan halaman web berjalan dengan lancar dan sesuai dengan harapan.
Referensi Tambahan:
- 2 Contoh Penggunaan Properti Implementation DOM pada HTML
- 2 Contoh Penggunaan Method importNode() DOM pada HTML
- Cara Penggunaan Properti inputEncoding DOM pada HTML
- Cara Penggunaan Properti lastModified DOM pada HTML
- 3 Contoh Penggunaan Link Collection pada DOM HTML
- Cara Penggunaan Method normalize() DOM pada HTML
- Cara Penggunaan Method normalizeDocument() DOM pada HTML
Artikel ini akan dibaca oleh: 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"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method getElementsByName pada DOM HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method getElementsByName() pada dom html:
Hapus1. Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa fungsi method getElementsByName() pada dom html?
BalasHapusMethod 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.
HapusMethod getElementsByName() dari object dokumen mengembalikan kumpulan elemen NodeList beserta nama atribut yang diberikan didalam dokumen tersebut.
Hapus