V JavaScriptu „ querySelectorAll() ” metoda načte úplně první prvek, který přesně odpovídá zadaným selektorům CSS. Tato metoda zahájí procházení stromu DOM za účelem provedení této úlohy. Jakmile je prvek nalezen, použije vestavěné vlastnosti nebo metody JavaScriptu definované v sekci skriptu k provádění speciálních úloh. Tato metoda se obvykle používá k výběru cílových prvků podle požadavků. Umožňuje uživatelům vybrat všechny prvky, které odpovídají zadanému selektoru nebo konkrétnímu umístěnému na daném indexu.
Tato příručka ilustruje použití metody „querySelectorAll()“ v JavaScriptu.
Jak používat metodu „querySelectorAll()“ v JavaScriptu?
Chcete-li použít „ querySelectorAll() ” zadejte selektor CSS jako jeho argument. Mezi selektory CSS patří „Typ, Třída a ID“. Pokud je selektor CSS neplatný, vrátí chybu syntaxe, jinak jako standardní výstup vrátí statický objekt NodeList.
Syntax
document.querySelectorAll ( CSS selektory )
Ve výše uvedené syntaxi je „ CSS selektory ” odkazují na všechny platné selektory CSS.
Použijme výše definovanou syntaxi prakticky.
HTML kód
Přehled daného HTML kódu:
< h2 třída = 'demo' > První nadpis h2 >< h3 třída = 'demo' > Druhý nadpis h3 >
< p třída = 'demo' > První odstavec p >
< p třída = 'demo' > Druhý odstavec p >
< knoflík při kliknutí = 'jsFunc()' > Klikněte zde ! knoflík >
Ve výše uvedených řádcích kódu:
- ' Tag přidává podnadpis s třídou „demo“.
- ' ” tag definuje druhý podnadpis se stejnou třídou s názvem “demo”.
- ' Tagy ” vkládají příkazy odstavce se stejnou třídou, tj. „demo“.
- '
Značka ” obsahuje nové tlačítko s událostí myši „onclick“ pro spuštění funkce „jsFunc()“.
Poznámka: V této příručce je dodržován konkrétní kód HTML.
Příklad 1: Použití metody „querySelectorAll()“ pro výběr prvků se stejnou třídou a změnu jejich barev
Tento příklad využívá metodu „querySelectorAll()“ k výběru všech prvků, které používají třídu „demo“.
JavaScript kód
Podívejme se na níže uvedený kód:
< skript >funkce jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
pro ( nechat i = 0 ; i < seznam.délka; i++ ) {
seznam [ i ] .style.color = 'oranžová červená' ;
}
}
skript >
Ve výše uvedených řádcích kódu:
- ' jsFunc() “ je definována funkce.
- Proměnná „list“ ve své definici využívá „ querySelectorAll() ” pro výběr všech prvků s třídou „demo“.
- Dále, „ pro “smyčka inicializuje seznam uzlů k iteraci podél všech nalezených prvků HTML, které mají třídu “ demo “ a změnit barvu jejich textu pomocí „ styl.barva ' vlastnictví.
Výstup
Ve výše uvedeném výstupu je vidět, že barva textu prvků obsahujících stejný název třídy, tj. „demo“, se po kliknutí na tlačítko změní.
Příklad 2: Použití metody „querySelectorAll()“ k výběru konkrétních indexovaných prvků
Kromě všech prvků může uživatel vybrat také konkrétní indexovaný prvek s třídou „demo“.
JavaScript kód
Zvažte daný kód JavaScript:
< skript >funkce jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
seznam [ 0 ] .style.color = 'zelená' ;
}
skript >
Ve výše uvedeném úryvku kódu:
- Proměnná „list“ vybere prvek „h2“, jehož třída je „demo“ pomocí „ querySelectorAll() “ metoda.
- Poté proměnná „list“ specifikuje index prvku „h2“, aby se změnila barva textu prvku „H2“ umístěného na indexu „0“.
Výstup
Výstup ukazuje, že barva textu prvku „H2“ umístěného na nulovém indexu má po kliknutí na tlačítko změněnou třídu „demo“.
Příklad 3: Použití metody „querySelectorAll()“ k získání počtu prvků se stejnou třídou
Tento příklad načte počet prvků se stejnou třídou pomocí metody „querySelectorAll()“.
HTML kód
Nejprve se podívejte na upravený HTML kód „Příklad 1“:
< p id = 'pro' > p >
Ve výše uvedeném HTML kódu připojte prázdný odstavec s id „para“ na konec HTML kódu „Příklad 1“.
JavaScript kód
Nyní pokračujte s kódem JavaScript:
< skript >funkce jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'pro' ) .innerHTML = nodelist.length;
}
skript >
Podle výše uvedeného fragmentu kódu:
- Funkce „jsFunc()“ nejprve vybere všechny prvky „
“ pomocí „ querySelectorAll() “ metoda.
- Poté se „ getElementById() Metoda ” přistupuje k přidanému prázdnému odstavci prostřednictvím jeho id „para“, aby k němu připojila vrácenou hodnotu aplikované vlastnosti „length“.
Výstup
Jak je vidět, výše uvedený výstup zobrazuje celkem „4“ prvky, které odpovídají zadanému „demu“ selektoru třídy CSS.
Závěr
' querySelectorAll() ” lze snadno použít zadáním selektoru CSS jako jeho hodnoty. Tato metoda odpovídá každému prvku HTML a vybere ty, které odpovídají zadanému selektoru. Jakmile jsou prvky vybrány, provede na nich požadovaný úkol definovaný v sekci skriptu. Tato příručka stručně ilustruje použití metody „querySelectorAll()“ v JavaScriptu.