I JavaScript er ' querySelectorAll() ”-metoden henter det allerførste element, der nøjagtigt matcher de angivne CSS-vælgere. Denne metode begynder at krydse DOM-træet for at udføre denne opgave. Når elementet er fundet, anvender det de indbyggede JavaScript-egenskaber eller metoder, der er defineret i scriptafsnittet, til at udføre specielle opgaver. Denne metode bruges normalt til at vælge de målrettede elementer i henhold til kravene. Det giver brugerne mulighed for at vælge alle elementer, der matcher den angivne vælger eller den bestemte, der er placeret ved det givne indeks.
Denne vejledning illustrerer brugen af metoden 'querySelectorAll()' i JavaScript.
Hvordan bruger man metoden 'querySelectorAll()' i JavaScript?
For at bruge ' querySelectorAll() ”-metoden, skal du angive CSS-vælgeren som dens argument. CSS-vælgerne inkluderer 'Type, Klasse og id'. Hvis CSS-vælgeren er ugyldig, returnerer den en syntaksfejl, ellers returnerer den et statisk NodeList-objekt som standardoutput.
Syntaks
document.querySelectorAll ( CSS-vælgere )
I ovenstående syntaks er ' CSS-vælgere ” henviser til alle de gyldige CSS-vælgere.
Lad os bruge den ovenfor definerede syntaks praktisk talt.
HTML kode
Oversigt over den givne HTML-kode:
< h2 klasse = 'demo' > Første overskrift h2 >< h3 klasse = 'demo' > Anden overskrift h3 >
< s klasse = 'demo' > Første afsnit s >
< s klasse = 'demo' > Andet afsnit s >
< knap onclick = 'jsFunc()' > Klik her ! knap >
I ovenstående kodelinjer:
- Det ' ” tag tilføjer en underoverskrift med klassen “demo”.
- Det ' ” tag definerer en anden underoverskrift med den samme klasse kaldet “demo”.
- Det ' '-tags indlejrer afsnitsudsagn med samme klasse, dvs. 'demo'.
- Det '
” tag inkluderer en ny knap med en “onclick” musehændelse for at udføre funktionen “jsFunc()”.
Bemærk: Den særlige HTML-kode følges gennem hele denne vejledning.
Eksempel 1: Anvendelse af metoden 'querySelectorAll()' til at vælge elementer med samme klasse og ændre deres farver
Dette eksempel bruger metoden 'querySelectorAll()' til at vælge alle de elementer, der bruger 'demo'-klassen.
JavaScript kode
Lad os gennemgå nedenstående kode:
< manuskript >fungere jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
til ( lade i = 0 ; jeg < liste.længde; i++ ) {
liste [ jeg ] .style.color = 'orangeret' ;
}
}
manuskript >
I ovenstående kodelinjer:
- Det ' jsFunc() ”-funktionen er defineret.
- I sin definition bruger 'liste'-variablen ' querySelectorAll() ” metode til at vælge alle de elementer, der har klassen “demo”.
- Dernæst ' til ' loop initialiserer en nodeliste for at iterere langs alle de fundne HTML-elementer med klassen ' demo ' og ændre deres tekstfarve ved at bruge ' stil.farve ” ejendom.
Produktion
I ovenstående output kan det ses, at tekstfarven på de elementer, der omfatter det samme klassenavn, dvs. 'demo' ændres ved et klik på knappen.
Eksempel 2: Anvendelse af metoden 'querySelectorAll()' til at vælge de specifikke indekserede elementer
Udover alle elementer kan brugeren også vælge det specifikke indekserede element med klassen 'demo'.
JavaScript kode
Overvej den givne JavaScript-kode:
< manuskript >fungere jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
liste [ 0 ] .style.color = 'grøn' ;
}
manuskript >
I ovenstående kodestykke:
- Variablen 'list' vælger 'h2'-elementet, hvis klasse er 'demo' ved hjælp af ' querySelectorAll() ” metode.
- Derefter angiver 'liste'-variablen indekset for 'h2'-elementet for at ændre tekstfarven på 'H2'-elementet placeret ved '0'-indekset.
Produktion
Outputtet viser, at tekstfarven på 'H2'-elementet placeret ved nul indeks har ændret klassen 'demo' ved et klik på knappen.
Eksempel 3: Anvendelse af metoden 'querySelectorAll()' for at få antallet af elementer med samme klasse
Dette eksempel henter antallet af elementer med samme klasse ved hjælp af 'querySelectorAll()'-metoden.
HTML kode
Først skal du tage et kig på den ændrede HTML-kode i 'Eksempel 1':
< s id = 'til' > s >
I den ovennævnte HTML-kode skal du tilføje et tomt afsnit med et id 'para' i slutningen af 'Eksempel 1' HTML-koden.
JavaScript kode
Fortsæt nu med JavaScript-koden:
< manuskript >fungere jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'til' ) .innerHTML = nodelist.length;
}
manuskript >
Ifølge ovenstående kodestykke:
- Funktionen 'jsFunc()' vælger først alle '
'-elementerne ved hjælp af ' querySelectorAll() ” metode.
- Derefter vil ' getElementById() ”-metoden får adgang til det tilføjede tomme afsnit gennem dets id 'para' for at tilføje det med den returnerede værdi af den anvendte 'længde'-egenskab.
Produktion
Som det ses, viser ovenstående output i alt '4' elementer, der matcher den angivne CSS-klassevælger 'demo'.
Konklusion
Det ' querySelectorAll() ”-metoden kan nemt bruges ved at angive CSS-vælgeren som dens værdi. Denne metode matcher hvert HTML-element og vælger dem, der matcher den angivne vælger. Når elementerne er valgt, udfører den den påkrævede opgave på dem, der er defineret i scriptafsnittet. Denne vejledning illustrerede kort brugen af metoden 'querySelectorAll()' i JavaScript.