Dalam berbagai situasi, pemrogram perlu mendapatkan elemen HTML dengan nama atribut. Misalkan pengembang ingin mengakses kontrol formulir, seperti tombol radio atau kotak centang, untuk membaca atau memanipulasi nilainya. Lebih khusus lagi, “ nama Atribut ” digunakan untuk mengelompokkan kontrol formulir terkait dan nama yang sama dapat diberikan ke banyak kontrol, yang memungkinkannya diakses sebagai satu grup.
Posting ini akan mengilustrasikan metode untuk mengambil elemen HTML dengan nama dalam JavaScript.
Bagaimana Cara Mendapatkan Elemen Berdasarkan Nama di JavaScript?
Dalam JavaScript, Anda dapat mengakses elemen HTML menggunakan atribut namanya dengan bantuan metode JavaScript yang telah ditentukan berikut ini:
-
- metode getElementsByName()
- metode querySelectorAll()
Metode 1: Dapatkan Elemen dengan Nama Menggunakan Metode “getElementsByName()”.
Untuk mendapatkan elemen HTML berdasarkan nama, gunakan “ getElementsByName() ' metode. Metode ini memberikan kumpulan elemen yang memiliki atribut nama tertentu.
Sintaksis
Sintaks berikut digunakan untuk metode getElementsByName() :
document.getElementsByName ( 'nama' )
Contoh
Pertama, buat enam tombol. Lima dari mereka memiliki ' nama ” atribut yang digunakan untuk mendapatkan elemen HTML “ tombol ”. Lampirkan acara onclick dengan tombol keenam yang akan memanggil ' applyStyle() ” berfungsi untuk memberi style pada lima tombol:
< tombol nama = 'btn' > Tombol tombol >< tombol nama = 'btn' > Tombol tombol >
< tombol nama = 'btn' > Tombol tombol >
< tombol nama = 'btn' > Tombol tombol >
< tombol nama = 'btn' > Tombol tombol > < br >< br >
< klik tombol = 'aplikasiStyle()' > Klik disini tombol >
Tentukan fungsi “ applyStyle() ” yang akan memicu klik tombol dan mengubah warna latar belakang semua tombol. Untuk melakukan ini, pertama, dapatkan semua “ tombol ” sebagai grup dengan memanggil elemen “ getElementsByName() ' metode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadet biru' ;
} ) ;
}
Seperti yang Anda lihat di output saat mengklik tombol, warna latar belakang dari lima tombol akan berubah:
Metode 2: Dapatkan Elemen dengan Nama Menggunakan Metode “querySelectorAll()”.
Anda juga dapat menggunakan “ querySelectorAll() ” metode untuk mendapatkan elemen dengan menggunakan “ nama ” atribut dalam JavaScript. Metode ini digunakan untuk mengambil semua elemen dalam dokumen yang cocok dengan pemilih/atribut tertentu seperti kelas CSS, id, atau nama.
Sintaksis
Sintaks yang diberikan digunakan untuk mendapatkan elemen dengan nama menggunakan ' querySelectorAll()” metode:
document.querySelectorAll ( '[nama='n1']' ) ;
Contoh
Dalam contoh berikut, kami hanya akan mengubah warna tombol yang namanya ' btn1 ”:
< div >< nama tombol = 'btn' > Tombol tombol >
< nama tombol = 'btn1' > Tombol tombol >
< nama tombol = 'btn' > Tombol tombol >
< nama tombol = 'btn1' > Tombol tombol >
< nama tombol = 'btn' > Tombol tombol > < br >< br >
< klik tombol = 'aplikasiStyle()' > Klik disini tombol >
div >
Dalam fungsi yang ditentukan, kami akan memanggil akses pertama semua elemen tombol yang namanya ' btn1 ” dan kemudian terapkan gaya di atasnya:
const btns = document.querySelectorAll ( '[nama='btn1']' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadetbiru' ;
} ) ;
}
Keluaran yang diberikan menandakan bahwa hanya dua tombol yang telah mengubah warna latar belakangnya yang bernama 'btn1':
Catatan: Jika Anda ingin mendapatkan satu elemen, disarankan untuk menggunakan document.querySelector daripada document.querySelectorAll.
Kesimpulan
Untuk mendapatkan atau mengambil elemen berdasarkan nama, gunakan tombol “ getElementsByName() ” atau “ querySelectorAll() metode. Metode yang paling umum dan efisien digunakan untuk mendapatkan elemen dengan nama adalah metode “getElementsByName()”. Posting ini mengilustrasikan metode untuk mengambil elemen HTML dengan nama di JavaScript.