V JavaScriptu je » querySelectorAll() ” pridobi prvi element, ki se natančno ujema z navedenimi izbirniki CSS. Ta metoda začne prečkati drevo DOM za izvedbo te naloge. Ko je element najden, uporabi vgrajene lastnosti JavaScript ali metode, definirane v razdelku skripta, za izvajanje posebnih nalog. Ta metoda se običajno uporablja za izbiro ciljnih elementov glede na zahteve. Uporabnikom omogoča, da izberejo vse elemente, ki se ujemajo z določenim izbirnikom ali določenim, ki je postavljen na dani indeks.
Ta vodnik ponazarja uporabo metode »querySelectorAll()« v JavaScriptu.
Kako uporabiti metodo »querySelectorAll()« v JavaScriptu?
Če želite uporabiti ' querySelectorAll() ” določite izbirnik CSS kot njen argument. Izbirniki CSS vključujejo »Tip, razred in id«. Če je izbirnik CSS neveljaven, vrne sintaktično napako, sicer vrne statični objekt NodeList kot svoj standardni izhod.
Sintaksa
document.querySelectorAll ( Izbirniki CSS )
V zgornji sintaksi je » Izbirniki CSS ” nanašajo na vse veljavne izbirnike CSS.
Uporabimo zgoraj definirano sintakso praktično.
HTML koda
Pregled dane kode HTML:
< h2 razred = 'demo' > Prvi naslov h2 >< h3 razred = 'demo' > Drugi naslov h3 >
< str razred = 'demo' > Prvi odstavek str >
< str razred = 'demo' > Drugi odstavek str >
< gumb onclick = 'jsFunc()' > Klikni tukaj ! gumb >
V zgornjih vrsticah kode:
- ' ” doda podnaslov z razredom “demo”.
- ' ” definira drugi podnaslov z istim razredom z imenom “demo”.
- ' ” oznake vdelajo stavke odstavkov, ki imajo isti razred, tj. “demo”.
- '
” vključuje nov gumb z dogodkom miške “onclick” za izvedbo funkcije “jsFunc()”.
Opomba: V tem priročniku se upošteva posebna koda HTML.
1. primer: uporaba metode »querySelectorAll()« za izbiro elementov, ki imajo isti razred, in spreminjanje njihovih barv
Ta primer uporablja metodo »querySelectorAll()« za izbiro vseh elementov, ki uporabljajo razred »demo«.
Koda JavaScript
Oglejmo si spodnjo kodo:
< scenarij >funkcijo jsFunc ( ) {
seznam const = document.querySelectorAll ( '.demo' ) ;
za ( pustiti jaz = 0 ; jaz < seznam.dolžina; i++ ) {
seznam [ jaz ] .style.color = 'oranžna' ;
}
}
scenarij >
V zgornjih vrsticah kode:
- ' jsFunc() ” je definirana funkcija.
- V svoji definiciji spremenljivka »seznam« uporablja » querySelectorAll() ' za izbiro vseh elementov, ki imajo razred 'demo'.
- Nato je ' za ' zanka inicializira seznam vozlišč za ponavljanje po vseh najdenih elementih HTML z razredom ' demo « in spremenite njihovo barvo besedila z uporabo » slog.barva ” lastnina.
Izhod
V zgornjem izhodu je razvidno, da se barva besedila elementov, ki sestavljajo isto ime razreda, tj. »demo«, spremeni po kliku gumba.
2. primer: uporaba metode »querySelectorAll()« za izbiro določenih indeksiranih elementov
Poleg vseh elementov lahko uporabnik izbere tudi določen indeksiran element z razredom »demo«.
Koda JavaScript
Razmislite o podani kodi JavaScript:
< scenarij >funkcijo jsFunc ( ) {
seznam const = document.querySelectorAll ( 'h2.demo' ) ;
seznam [ 0 ] .style.color = 'zelena' ;
}
scenarij >
V zgornjem delčku kode:
- Spremenljivka “list” izbere element “h2”, katerega razred je “demo” s pomočjo “ querySelectorAll() ” metoda.
- Po tem spremenljivka »list« poda indeks elementa »h2«, da spremeni barvo besedila elementa »H2«, postavljenega na indeks »0«.
Izhod
Izhod kaže, da ima barva besedila elementa »H2«, postavljenega na ničelni indeks, razred »demo« spremenjen po kliku gumba.
3. primer: uporaba metode »querySelectorAll()« za pridobitev števila elementov, ki imajo isti razred
Ta primer pridobi število elementov, ki imajo isti razred z uporabo metode »querySelectorAll()«.
HTML koda
Najprej si oglejte spremenjeno kodo HTML »Primera 1«:
< str id = 'za' > str >
V zgoraj navedeni kodi HTML dodajte prazen odstavek z id-jem »para« na koncu kode HTML »Primer 1«.
Koda JavaScript
Zdaj nadaljujte s kodo JavaScript:
< scenarij >funkcijo jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'za' ) .innerHTML = nodelist.length;
}
scenarij >
Glede na zgornji delček kode:
- Funkcija “jsFunc()” najprej izbere vse elemente “
” z uporabo “ querySelectorAll() ” metoda.
- Po tem je ' getElementById() ” dostopa do dodanega praznega odstavka prek njegovega id-ja “para”, da mu doda vrnjeno vrednost uporabljene lastnosti “length”.
Izhod
Kot je razvidno, zgornji izhod prikazuje skupno »4« elemente, ki se ujemajo z določenim izbirnikom razreda CSS »demo«.
Zaključek
' querySelectorAll() ” lahko enostavno uporabite tako, da kot vrednost določite izbirnik CSS. Ta metoda se ujema z vsakim elementom HTML in izbere tiste, ki se ujemajo z navedenim izbirnikom. Ko so elementi izbrani, na njih izvede zahtevano nalogo, določeno v razdelku skripta. Ta priročnik je na kratko ponazoril uporabo metode »querySelectorAll()« v JavaScriptu.