În diferite situații, programatorii trebuie să obțină elementul HTML după atributul name. Să presupunem că dezvoltatorul dorește să acceseze un control de formular, cum ar fi un buton radio sau o casetă de selectare, pentru a citi sau a manipula valoarea acestuia. Mai precis, „ Nume ” este folosit pentru a grupa controalele de formular asociate și același nume poate fi furnizat mai multor controale, permițându-le să fie accesate ca un singur grup.
Această postare va ilustra metodele de a prelua un element HTML după nume în JavaScript.
Cum să obțineți elemente după nume în JavaScript?
În JavaScript, puteți accesa un element HTML folosind atributul nume cu ajutorul următoarelor metode JavaScript predefinite:
-
- Metoda getElementsByName().
- Metoda querySelectorAll().
Metoda 1: Obțineți elementul după nume folosind metoda „getElementsByName()”
Pentru a obține elementul HTML după nume, utilizați „ getElementsByName() ” metoda. Această metodă oferă o colecție de elemente care au atributul name specificat.
Sintaxă
Următoarea sintaxă este utilizată pentru metoda getElementsByName():
document.getElementsByName ( 'Nume' )
Exemplu
În primul rând, creați șase butoane. Cinci dintre ei au un „ Nume ” atribut care este folosit pentru a obține elementul HTML ” buton ”. Atașați evenimentul onclick cu al șaselea buton care va apela „ applyStyle() ” pentru stilul celor cinci butoane:
< buton Nume = 'btn' > Buton buton >< buton Nume = 'btn' > Buton buton >
< buton Nume = 'btn' > Buton buton >
< buton Nume = 'btn' > Buton buton >
< buton Nume = 'btn' > Buton buton > < br >< br >
< butonul onclick = „aplica stil()” > Click aici buton >
Definiți o funcție „ applyStyle() ” care se va declanșa la clic pe buton și va schimba culoarea de fundal a tuturor butoanelor. Pentru a face acest lucru, mai întâi, obțineți toate „ buton ” elemente ca grup prin apelarea „ getElementsByName() ” metoda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
După cum puteți vedea în rezultat în timp ce faceți clic pe buton, culoarea de fundal a celor cinci butoane va fi schimbată:
Metoda 2: Obțineți elementul după nume folosind metoda „querySelectorAll()”.
De asemenea, puteți utiliza „ querySelectorAll() ” pentru obținerea elementelor prin folosirea “ Nume ” atribut în JavaScript. Această metodă este utilizată pentru a prelua toate elementele dintr-un document care se potrivesc cu un selector/atribut specificat, cum ar fi clasa CSS, id-ul sau numele.
Sintaxă
Sintaxa dată este utilizată pentru obținerea elementului după nume folosind „ querySelectorAll()” metodă:
document.querySelectorAll ( „[]” ) ;
Exemplu
În exemplul următor, vom schimba culoarea doar acelor butoane al căror nume este „ btn1 ”:
< div >< numele butonului = 'btn' > Buton buton >
< numele butonului = 'btn1' > Buton buton >
< numele butonului = 'btn' > Buton buton >
< numele butonului = 'btn1' > Buton buton >
< numele butonului = 'btn' > Buton buton > < br >< br >
< butonul onclick = „aplica stil()” > Click aici buton >
div >
În funcția definită, vom apela mai întâi acces la toate elementele de buton al căror nume este „ btn1 ” și apoi aplicați stilul pe el:
const btns = document.querySelectorAll ( „[]” ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Ieșirea dată înseamnă că doar două butoane și-au schimbat culoarea de fundal al căror nume este „btn1”:
Notă: Dacă doriți să obțineți un singur element, este recomandat să utilizați document.querySelector în loc de document.querySelectorAll.
Concluzie
Pentru a obține sau a prelua un element după nume, utilizați „ getElementsByName() ' sau ' querySelectorAll() ” metode. Metoda cea mai frecvent utilizată și eficient pentru obținerea elementului după nume este metoda „getElementsByName()”. Această postare a ilustrat metodele de a prelua un element HTML după nume în JavaScript.