Különböző helyzetekben a programozóknak a HTML elemet a name attribútummal kell megszerezniük. Tegyük fel, hogy a fejlesztő hozzá akar férni egy űrlapvezérlőhöz, például egy rádiógombhoz vagy jelölőnégyzethez, hogy beolvassa vagy módosítsa az értékét. Pontosabban a „ név ” attribútum a kapcsolódó űrlapvezérlők csoportosítására szolgál, és ugyanaz a név megadható számos vezérlőnek, így egyetlen csoportként is elérhetők.
Ez a bejegyzés bemutatja a HTML-elemek név szerinti lekérésének módszereit JavaScriptben.
Hogyan lehet elemeket név szerint beszerezni JavaScriptben?
A JavaScriptben egy HTML elemet a name attribútum használatával érhet el a következő előre definiált JavaScript metódusok segítségével:
-
- getElementsByName() metódus
- querySelectorAll() metódus
1. módszer: Elem lekérése név szerint a „getElementsByName()” módszerrel
A HTML elem név szerinti lekéréséhez használja a „ getElementsByName() ” módszerrel. Ez a módszer olyan elemek gyűjteményét adja, amelyek rendelkeznek a megadott név attribútummal.
Szintaxis
A getElementsByName() metódus a következő szintaxist használja:
document.getElementsByName ( 'név' )
Példa
Először hozzon létre hat gombot. Közülük ötnek van egy „ név ' attribútum, amely a HTML elem lekérésére szolgál ' gomb ”. Csatolja az onclick eseményt a hatodik gombbal, amely meghívja a ' alkalmazStyle() ” funkció az öt gomb stílusának beállításához:
< gomb név = 'btn' > Gomb gomb >< gomb név = 'btn' > Gomb gomb >
< gomb név = 'btn' > Gomb gomb >
< gomb név = 'btn' > Gomb gomb >
< gomb név = 'btn' > Gomb gomb > < br >< br >
< gomb onclick = 'applyStyle()' > Kattints ide gomb >
Határozzon meg egy függvényt ' alkalmazStyle() ” amely elindítja a gombkattintást, és megváltoztatja az összes gomb háttérszínét. Ehhez először szerezze be az összes ' gomb ' elemek csoportként a ' getElementsByName() ” módszer:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadétkék' ;
} ) ;
}
Amint az a kimeneten látható a gombra kattintva, az öt gomb háttérszíne megváltozik:
2. módszer: Elemek lekérése név szerint a „querySelectorAll()” módszerrel
Használhatja a „ querySelectorAll() ' módszer az elemek megszerzéséhez a ' név ” attribútum a JavaScriptben. Ezzel a módszerrel lekérhető egy dokumentum összes olyan eleme, amely megfelel egy megadott választónak/attribútumnak, például CSS-osztálynak, azonosítónak vagy névnek.
Szintaxis
A megadott szintaxist használják az elem név szerinti lekéréséhez a ' querySelectorAll()” módszer:
document.querySelectorAll ( '[]' ) ;
Példa
A következő példában csak azoknak a gomboknak változtatjuk meg a színét, amelyek neve „ btn1 ”:
< div >< gomb neve = 'btn' > Gomb gomb >
< gomb neve = 'btn1' > Gomb gomb >
< gomb neve = 'btn' > Gomb gomb >
< gomb neve = 'btn1' > Gomb gomb >
< gomb neve = 'btn' > Gomb gomb > < br >< br >
< gomb onclick = 'applyStyle()' > Kattints ide gomb >
div >
A definiált függvényben először meghívjuk az összes olyan gombelemet, amelyek neve ' btn1 ”, majd alkalmazzunk rá stílust:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadétkék' ;
} ) ;
}
A megadott kimenet azt jelenti, hogy csak két gomb változtatta meg a háttérszínét, amelyek neve „btn1”:
Jegyzet: Ha egyetlen elemet szeretne kapni, akkor a document.querySelectorAll helyett a document.querySelector használata javasolt.
Következtetés
Egy elem név szerinti lekéréséhez vagy lekéréséhez használja a „ getElementsByName() ' vagy a ' querySelectorAll() ” módszerekkel. Az elem név szerinti lekérésének leggyakrabban és leghatékonyabban használt módszere a „getElementsByName()” metódus. Ez a bejegyzés bemutatta a HTML-elemek név szerinti lekérésének módszereit JavaScriptben.