I JavaScript er ' querySelectorAll() ”-metoden henter det aller første elementet som nøyaktig samsvarer med de angitte CSS-velgerne. Denne metoden begynner å krysse DOM-treet for å utføre denne oppgaven. Når elementet er funnet, bruker det de innebygde JavaScript-egenskapene eller metodene som er definert i skriptdelen for å utføre spesielle oppgaver. Denne metoden brukes vanligvis til å velge de målrettede elementene i henhold til kravene. Den lar brukerne velge alle elementer som samsvarer med den spesifiserte velgeren eller den bestemte som er plassert på den gitte indeksen.
Denne veiledningen illustrerer bruken av 'querySelectorAll()'-metoden i JavaScript.
Hvordan bruke 'querySelectorAll()'-metoden i JavaScript?
For å bruke ' querySelectorAll() ”-metoden, spesifiser CSS-velgeren som argument. CSS-velgerne inkluderer 'Type, Klasse og ID'. Hvis CSS-velgeren er ugyldig, returnerer den en syntaksfeil, ellers returnerer den et statisk NodeList-objekt som standardutdata.
Syntaks
document.querySelectorAll ( CSS-velgere )
I syntaksen ovenfor, ' CSS-velgere ' refererer til alle gyldige CSS-velgere.
La oss bruke den ovenfor definerte syntaksen praktisk talt.
HTML-kode
Oversikt over gitt HTML-kode:
< h2 klasse = 'demo' > Første overskrift h2 >< h3 klasse = 'demo' > Andre overskrift h3 >
< s klasse = 'demo' > Første ledd s >
< s klasse = 'demo' > Andre ledd s >
< knapp ved trykk = 'jsFunc()' > Klikk her ! knapp >
I kodelinjene ovenfor:
- « '-taggen legger til en underoverskrift med klassen 'demo'.
- « '-taggen definerer en andre underoverskrift med samme klasse kalt 'demo'.
- « '-tagger bygger inn avsnittssetningene som har samme klasse, dvs. 'demo'.
- «
”-taggen inkluderer en ny knapp med en “onclick”-musehendelse for å utføre “jsFunc()”-funksjonen.
Merk: Den bestemte HTML-koden følges gjennom denne veiledningen.
Eksempel 1: Bruk av 'querySelectorAll()'-metoden for å velge elementer som har samme klasse og endre fargene deres
Dette eksemplet bruker 'querySelectorAll()'-metoden for å velge alle elementene som bruker 'demo'-klassen.
JavaScript-kode
La oss se på koden nedenfor:
< manus >funksjon jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
til ( la jeg = 0 ; Jeg < liste.lengde; i++ ) {
liste [ Jeg ] .style.color = 'oransje rød' ;
}
}
manus >
I kodelinjene ovenfor:
- « jsFunc() '-funksjonen er definert.
- I sin definisjon bruker 'liste'-variabelen ' querySelectorAll() '-metoden for å velge alle elementene som har klassen 'demo'.
- Deretter ' til ' loop initialiserer en nodeliste for å iterere langs alle de funnet HTML-elementene med klassen ' demo ' og endre tekstfargen ved å bruke ' stil.farge ' eiendom.
Produksjon
I utgangen ovenfor kan det sees at tekstfargen til elementene som består av samme klassenavn, dvs. 'demo' endres ved å klikke på knappen.
Eksempel 2: Bruk av metoden 'querySelectorAll()' for å velge de spesifikke indekserte elementene
Bortsett fra alle elementene, kan brukeren også velge det spesifikke indekserte elementet som har klassen 'demo'.
JavaScript-kode
Vurder den gitte JavaScript-koden:
< manus >funksjon jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
liste [ 0 ] .style.color = 'grønn' ;
}
manus >
I kodebiten ovenfor:
- 'List'-variabelen velger 'h2'-elementet hvis klasse er 'demo' ved hjelp av ' querySelectorAll() 'metoden.
- Etter det spesifiserer 'list'-variabelen indeksen til 'h2'-elementet for å endre tekstfargen til 'H2'-elementet plassert ved '0'-indeksen.
Produksjon
Utdataene viser at tekstfargen til 'H2'-elementet plassert på nullindeks har klassen 'demo' endret ved å klikke på knappen.
Eksempel 3: Bruk av 'querySelectorAll()'-metoden for å få antall elementer som har samme klasse
Dette eksemplet henter antall elementer som har samme klasse ved å bruke 'querySelectorAll()'-metoden.
HTML-kode
Først, ta en titt på den endrede HTML-koden til 'Eksempel 1':
< s id = 'til' > s >
I HTML-koden ovenfor legger du til et tomt avsnitt med en id 'para' på slutten av HTML-koden 'Eksempel 1'.
JavaScript-kode
Fortsett nå med JavaScript-koden:
< manus >funksjon jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'til' ) .innerHTML = nodelist.length;
}
manus >
I henhold til kodebiten ovenfor:
- Funksjonen 'jsFunc()' velger først alle '
'-elementene ved å bruke ' querySelectorAll() 'metoden.
- Etter det, ' getElementById() ”-metoden får tilgang til det tilføyde tomme avsnittet gjennom ID-en “para” for å legge til den returnerte verdien av den brukte “length”-egenskapen.
Produksjon
Som sett viser utdataene ovenfor totalt '4' elementer som samsvarer med den angitte CSS-klassevelgeren 'demo'.
Konklusjon
« querySelectorAll() ”-metoden kan enkelt brukes ved å angi CSS-velgeren som verdien. Denne metoden samsvarer med hvert HTML-element og velger de som samsvarer med den angitte velgeren. Når elementene er valgt, utfører den den nødvendige oppgaven på dem som er definert i skriptdelen. Denne veiledningen illustrerte kort bruken av 'querySelectorAll()'-metoden i JavaScript.