Dalam pelbagai situasi, pengaturcara perlu mendapatkan elemen HTML dengan atribut nama. Katakan pembangun ingin mengakses kawalan borang, seperti butang radio atau kotak semak, untuk membaca atau memanipulasi nilainya. Lebih khusus lagi, ' nama Atribut ” digunakan untuk mengumpulkan kawalan borang berkaitan dan nama yang sama boleh diberikan kepada banyak kawalan, membolehkan mereka diakses sebagai satu kumpulan.
Siaran ini akan menggambarkan kaedah untuk mendapatkan semula elemen HTML mengikut nama dalam JavaScript.
Bagaimana untuk Mendapatkan Elemen mengikut Nama dalam JavaScript?
Dalam JavaScript, anda boleh mengakses elemen HTML menggunakan atribut namanya dengan bantuan kaedah JavaScript pratakrif berikut:
-
- Kaedah getElementsByName().
- Kaedah querySelectorAll().
Kaedah 1: Dapatkan Elemen mengikut Nama Menggunakan Kaedah 'getElementsByName()'.
Untuk mendapatkan elemen HTML mengikut nama, gunakan ' getElementsByName() ” kaedah. Kaedah ini memberikan koleksi elemen yang mempunyai atribut nama yang ditentukan.
Sintaks
Sintaks berikut digunakan untuk kaedah getElementsByName():
document.getElementsByName ( “nama” )
Contoh
Pertama, buat enam butang. Lima daripadanya mempunyai ' nama ' atribut yang digunakan untuk mendapatkan elemen HTML ' butang ”. Lampirkan acara onclick dengan butang keenam yang akan memanggil ' applyStyle() ” berfungsi untuk menggayakan lima butang:
< butang nama = 'btn' > Butang butang >< butang nama = 'btn' > Butang butang >
< butang nama = 'btn' > Butang butang >
< butang nama = 'btn' > Butang butang >
< butang nama = 'btn' > Butang butang > < br >< br >
< butang onclick = 'applyStyle()' > Tekan di sini butang >
Tentukan fungsi ' applyStyle() ” yang akan mencetuskan pada klik butang dan menukar warna latar belakang semua butang. Untuk melakukan ini, pertama, dapatkan semua ' butang 'elemen sebagai kumpulan dengan memanggil ' getElementsByName() ' kaedah:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadet biru' ;
} ) ;
}
Seperti yang anda lihat dalam output semasa mengklik pada butang warna latar belakang lima butang akan ditukar:
Kaedah 2: Dapatkan Elemen mengikut Nama Menggunakan Kaedah 'querySelectorAll()'.
Anda juga boleh menggunakan ' querySelectorAll() kaedah untuk mendapatkan elemen dengan menggunakan ' nama ” atribut dalam JavaScript. Kaedah ini digunakan untuk mendapatkan semula semua elemen dalam dokumen yang sepadan dengan pemilih/atribut tertentu seperti kelas CSS, id atau nama.
Sintaks
Sintaks yang diberikan digunakan untuk mendapatkan elemen dengan nama menggunakan ' querySelectorAll()” kaedah:
document.querySelectorAll ( '[]' ) ;
Contoh
Dalam contoh berikut, kami akan menukar warna hanya butang yang namanya ' btn1 ”:
< div >< nama butang = 'btn' > Butang butang >
< nama butang = 'btn1' > Butang butang >
< nama butang = 'btn' > Butang butang >
< nama butang = 'btn1' > Butang butang >
< nama butang = 'btn' > Butang butang > < br >< br >
< butang onclick = 'applyStyle()' > Tekan di sini butang >
div >
Dalam fungsi yang ditentukan, kami akan memanggil akses pertama semua elemen butang yang namanya ' btn1 ” dan kemudian gunakan penggayaan padanya:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadet biru' ;
} ) ;
}
Output yang diberikan menandakan bahawa hanya dua butang telah menukar warna latar belakangnya yang namanya 'btn1':
Catatan: Jika anda ingin mendapatkan satu elemen, anda disyorkan untuk menggunakan document.querySelector dan bukannya document.querySelectorAll.
Kesimpulan
Untuk mendapatkan atau mendapatkan semula elemen dengan nama, gunakan ' getElementsByName() ' atau ' querySelectorAll() ” kaedah. Kaedah yang paling biasa dan cekap digunakan untuk mendapatkan elemen mengikut nama ialah kaedah 'getElementsByName()'. Siaran ini menggambarkan kaedah untuk mendapatkan semula elemen HTML mengikut nama dalam JavaScript.