V JavaScripte je „ querySelectorAll() ” metóda načíta úplne prvý prvok, ktorý presne zodpovedá zadaným selektorom CSS. Táto metóda začne prechádzať stromom DOM na vykonanie tejto úlohy. Po nájdení prvku použije vstavané vlastnosti alebo metódy JavaScriptu definované v sekcii skriptov na vykonávanie špeciálnych úloh. Táto metóda sa zvyčajne používa na výber cieľových prvkov podľa požiadaviek. Umožňuje používateľom vybrať všetky prvky, ktoré zodpovedajú zadanému selektoru alebo konkrétnemu prvku umiestnenému v danom indexe.
Táto príručka ilustruje použitie metódy „querySelectorAll()“ v jazyku JavaScript.
Ako používať metódu „querySelectorAll()“ v JavaScripte?
Ak chcete použiť „ querySelectorAll() ” zadajte selektor CSS ako jej argument. Medzi selektory CSS patria „Typ, Class a id“. Ak je selektor CSS neplatný, vráti chybu syntaxe, v opačnom prípade vráti statický objekt NodeList ako svoj štandardný výstup.
Syntax
document.querySelectorAll ( Selektor CSS )
Vo vyššie uvedenej syntaxi je „ Selektor CSS ” odkazujú na všetky platné selektory CSS.
Využime vyššie definovanú syntax prakticky.
HTML kód
Prehľad daného HTML kódu:
< h2 trieda = 'demo' > Prvý nadpis h2 >< h3 trieda = 'demo' > Druhý nadpis h3 >
< p trieda = 'demo' > Prvý odsek p >
< p trieda = 'demo' > Druhý odsek p >
< tlačidlo po kliknutí = 'jsFunc()' > Kliknite tu ! tlačidlo >
Vo vyššie uvedených riadkoch kódu:
- ' ” tag pridáva podnadpis s triedou “demo”.
- ' ” tag definuje druhý podnadpis s rovnakou triedou s názvom “demo”.
- ' Značky ” vkladajú príkazy odseku s rovnakou triedou, t. j. „demo“.
- '
Značka ” obsahuje nové tlačidlo s udalosťou myši „onclick“ na spustenie funkcie „jsFunc()“.
Poznámka: V tejto príručke sa dodržiava konkrétny kód HTML.
Príklad 1: Použitie metódy „querySelectorAll()“ na výber prvkov s rovnakou triedou a zmenu ich farieb
Tento príklad využíva metódu „querySelectorAll()“ na výber všetkých prvkov, ktoré používajú triedu „demo“.
JavaScript kód
Pozrime sa na nižšie uvedený kód:
< skript >funkciu jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
pre ( nech i = 0 ; i < zoznam.dĺžka; i++ ) {
zoznam [ i ] .style.color = 'oranžovaný' ;
}
}
skript >
Vo vyššie uvedených riadkoch kódu:
- ' jsFunc() “ je definovaná funkcia.
- Premenná „zoznam“ vo svojej definícii využíva „ querySelectorAll() “ na výber všetkých prvkov s triedou „demo“.
- Ďalej, „ pre “cyklus inicializuje zoznam uzlov na iteráciu pozdĺž všetkých nájdených prvkov HTML s triedou “ demo “ a zmeniť farbu ich textu pomocou „ štýl.farba ' nehnuteľnosť.
Výkon
Vo vyššie uvedenom výstupe je možné vidieť, že farba textu prvkov obsahujúcich rovnaký názov triedy, t. j. „demo“, sa po kliknutí na tlačidlo zmení.
Príklad 2: Použitie metódy „querySelectorAll()“ na výber špecifických indexovaných prvkov
Okrem všetkých prvkov si používateľ môže vybrať aj konkrétny indexovaný prvok s triedou „demo“.
JavaScript kód
Zvážte daný kód JavaScript:
< skript >funkciu jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
zoznam [ 0 ] .style.color = 'zelená' ;
}
skript >
Vo vyššie uvedenom útržku kódu:
- Premenná „list“ vyberie prvok „h2“, ktorého trieda je „demo“ pomocou „ querySelectorAll() “.
- Potom premenná „list“ špecifikuje index prvku „h2“, aby sa zmenila farba textu prvku „H2“ umiestneného na indexe „0“.
Výkon
Výstup ukazuje, že farba textu prvku „H2“ umiestneného na nulovom indexe má po kliknutí na tlačidlo zmenenú triedu „demo“.
Príklad 3: Použitie metódy „querySelectorAll()“ na získanie počtu prvkov s rovnakou triedou
Tento príklad získa počet prvkov s rovnakou triedou pomocou metódy „querySelectorAll()“.
HTML kód
Najprv sa pozrite na upravený kód HTML „Príklad 1“:
< p id = 'pre' > p >
Vo vyššie uvedenom HTML kóde pridajte prázdny odsek s id „para“ na koniec HTML kódu „Príklad 1“.
JavaScript kód
Teraz pokračujte kódom JavaScript:
< skript >funkciu jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'pre' ) .innerHTML = nodelist.length;
}
skript >
Podľa vyššie uvedeného útržku kódu:
- Funkcia „jsFunc()“ najskôr vyberie všetky prvky „
“ pomocou „ querySelectorAll() “.
- Potom sa „ getElementById() Metóda ” pristupuje k pridanému prázdnemu odseku prostredníctvom svojho id „para“, aby k nemu pripojila vrátenú hodnotu aplikovanej vlastnosti „length“.
Výkon
Ako je vidieť, vyššie uvedený výstup zobrazuje celkom „4“ prvky, ktoré zodpovedajú zadanému „ukážke“ selektora triedy CSS.
Záver
' querySelectorAll() ” je možné jednoducho použiť zadaním selektora CSS ako jeho hodnoty. Táto metóda sa zhoduje s každým prvkom HTML a vyberie tie, ktoré zodpovedajú zadanému selektoru. Po výbere prvkov vykoná na nich požadovanú úlohu definovanú v sekcii skriptov. Táto príručka stručne ilustruje použitie metódy „querySelectorAll()“ v jazyku JavaScript.