V rôznych situáciách potrebujú programátori získať prvok HTML pomocou atribútu name. Predpokladajme, že vývojár chce získať prístup k ovládaciemu prvku formulára, ako je prepínač alebo začiarkavacie políčko, aby mohol čítať alebo manipulovať s jeho hodnotou. Presnejšie povedané, „ názov ” sa používa na zoskupenie súvisiacich ovládacích prvkov formulára a rovnaký názov možno poskytnúť mnohým ovládacím prvkom, čo umožňuje prístup k nim ako k jednej skupine.
Tento príspevok ilustruje metódy na získanie prvku HTML podľa názvu v jazyku JavaScript.
Ako získať prvky podľa názvu v JavaScripte?
V JavaScripte môžete pristupovať k prvku HTML pomocou jeho atribútu name pomocou nasledujúcich preddefinovaných metód JavaScript:
-
- metóda getElementsByName().
- metóda querySelectorAll().
Metóda 1: Získajte prvok podľa názvu pomocou metódy „getElementsByName()“.
Ak chcete získať prvok HTML podľa názvu, použite príkaz „ getElementsByName() “. Táto metóda poskytuje kolekciu prvkov, ktoré majú špecifikovaný atribút názvu.
Syntax
Pre metódu getElementsByName() sa používa nasledujúca syntax:
document.getElementsByName ( 'názov' )
Príklad
Najprv vytvorte šesť tlačidiel. Päť z nich má „ názov ” atribút, ktorý sa používa na získanie elementu HTML “ tlačidlo “. Pripojte udalosť onclick pomocou šiesteho tlačidla, ktoré bude volať „ applyStyle() ” funkcia na štýl piatich tlačidiel:
< tlačidlo názov = 'btn' > Tlačidlo tlačidlo >< tlačidlo názov = 'btn' > Tlačidlo tlačidlo >
< tlačidlo názov = 'btn' > Tlačidlo tlačidlo >
< tlačidlo názov = 'btn' > Tlačidlo tlačidlo >
< tlačidlo názov = 'btn' > Tlačidlo tlačidlo > < br < br >
< tlačidlo onclick = 'applyStyle()' > Kliknite tu tlačidlo >
Definujte funkciu ' applyStyle() “, ktorý sa spustí po kliknutí na tlačidlo a zmení farbu pozadia všetkých tlačidiel. Ak to chcete urobiť, najprv získajte všetky „ tlačidlo ” prvky ako skupinu volaním “ getElementsByName() “ metóda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Ako môžete vidieť vo výstupe pri kliknutí na tlačidlo, farba pozadia piatich tlačidiel sa zmení:
Metóda 2: Získajte prvok podľa názvu pomocou metódy „querySelectorAll()“.
Môžete tiež využiť „ querySelectorAll() “ metóda na získanie prvkov pomocou „ názov ” v JavaScripte. Táto metóda sa používa na načítanie všetkých prvkov v dokumente, ktoré zodpovedajú zadanému selektoru/atribútu, ako je trieda CSS, id alebo názov.
Syntax
Daná syntax sa používa na získanie prvku podľa názvu pomocou „ querySelectorAll()” metóda:
document.querySelectorAll ( '[]' ) ;
Príklad
V nasledujúcom príklade zmeníme farbu iba tých tlačidiel, ktorých názov je „ btn1 “:
< div >< názov tlačidla = 'btn' > Tlačidlo tlačidlo >
< názov tlačidla = 'btn1' > Tlačidlo tlačidlo >
< názov tlačidla = 'btn' > Tlačidlo tlačidlo >
< názov tlačidla = 'btn1' > Tlačidlo tlačidlo >
< názov tlačidla = 'btn' > Tlačidlo tlačidlo > < br < br >
< tlačidlo onclick = 'applyStyle()' > Kliknite tu tlačidlo >
div >
V definovanej funkcii najskôr zavoláme prístup všetkým prvkom tlačidiel, ktorých názov je „ btn1 “ a potom naň aplikujte štýl:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Daný výstup znamená, že iba dve tlačidlá zmenili farbu pozadia s názvom „btn1“:
Poznámka: Ak chcete získať jeden prvok, odporúča sa použiť document.querySelector namiesto document.querySelectorAll.
Záver
Na získanie alebo načítanie prvku podľa názvu použite „ getElementsByName() ' alebo ' querySelectorAll() “ metódy. Najbežnejšie a najefektívnejšie využívanou metódou na získanie prvku podľa názvu je metóda „getElementsByName()“. Tento príspevok ilustroval metódy na získanie prvku HTML podľa názvu v jazyku JavaScript.