V různých situacích potřebují programátoři získat prvek HTML pomocí atributu name. Předpokládejme, že vývojář chce získat přístup k ovládacímu prvku formuláře, jako je přepínač nebo zaškrtávací políčko, aby mohl číst nebo manipulovat s jeho hodnotou. Přesněji řečeno, „ název Atribut ” se používá k seskupení souvisejících ovládacích prvků formuláře a stejný název lze poskytnout mnoha ovládacím prvkům, což umožňuje přístup k nim jako k jediné skupině.
Tento příspěvek bude ilustrovat metody pro načtení prvku HTML podle názvu v JavaScriptu.
Jak získat prvky podle názvu v JavaScriptu?
V JavaScriptu můžete přistupovat k prvku HTML pomocí jeho atributu name pomocí následujících předdefinovaných metod JavaScriptu:
-
- Metoda getElementsByName().
- Metoda querySelectorAll().
Metoda 1: Získání prvku podle názvu pomocí metody „getElementsByName()“.
Chcete-li získat prvek HTML podle názvu, použijte „ getElementsByName() “ metoda. Tato metoda poskytuje kolekci prvků, které mají zadaný atribut názvu.
Syntax
Pro metodu getElementsByName() se používá následující syntaxe:
document.getElementsByName ( 'název' )
Příklad
Nejprve vytvořte šest tlačítek. Pět z nich má „ název ” atribut, který se používá k získání elementu HTML “ knoflík “. Připojte událost onclick pomocí šestého tlačítka, které bude volat „ applyStyle() ” funkce pro styling pěti tlačítek:
< knoflík název = 'btn' > Knoflík knoflík >< knoflík název = 'btn' > Knoflík knoflík >
< knoflík název = 'btn' > Knoflík knoflík >
< knoflík název = 'btn' > Knoflík knoflík >
< knoflík název = 'btn' > Knoflík knoflík > < br < br >
< tlačítko onclick = 'applyStyle()' > Klikněte zde knoflík >
Definujte funkci ' applyStyle() ”, který se spustí po kliknutí na tlačítko a změní barvu pozadí všech tlačítek. Chcete-li to provést, nejprve získejte všechny „ knoflík ” prvky jako skupinu voláním „ getElementsByName() “ metoda:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Jak můžete vidět ve výstupu při kliknutí na tlačítko, barva pozadí pěti tlačítek se změní:
Metoda 2: Získejte prvek podle názvu pomocí metody „querySelectorAll()“.
Můžete také využít „ querySelectorAll() ” metoda pro získání prvků pomocí “ název ” v JavaScriptu. Tato metoda se používá k načtení všech prvků v dokumentu, které odpovídají zadanému selektoru/atributu, jako je třída CSS, id nebo název.
Syntax
Daná syntaxe se používá k získání prvku podle názvu pomocí „ querySelectorAll()” metoda:
document.querySelectorAll ( '[]' ) ;
Příklad
V následujícím příkladu změníme barvu pouze těch tlačítek, jejichž název je „ btn1 “:
< div >< název tlačítka = 'btn' > Knoflík knoflík >
< název tlačítka = 'btn1' > Knoflík knoflík >
< název tlačítka = 'btn' > Knoflík knoflík >
< název tlačítka = 'btn1' > Knoflík knoflík >
< název tlačítka = 'btn' > Knoflík knoflík > < br < br >
< tlačítko onclick = 'applyStyle()' > Klikněte zde knoflík >
div >
V definované funkci zavoláme nejprve access všechny prvky tlačítka, jejichž název je „ btn1 “ a poté na něj aplikujte styl:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Daný výstup znamená, že pouze dvě tlačítka změnila barvu pozadí, jejichž název je „btn1“:
Poznámka: Pokud chcete získat jeden prvek, doporučujeme použít document.querySelector místo document.querySelectorAll.
Závěr
Pro získání nebo načtení prvku podle názvu použijte „ getElementsByName() ' nebo ' querySelectorAll() “ metody. Nejběžněji a nejúčinněji používanou metodou pro získání prvku podle názvu je metoda „getElementsByName()“. Tento příspěvek ilustroval metody pro načtení prvku HTML podle názvu v JavaScriptu.