In JavaScript is de ' querySelectorAll() ” methode haalt het allereerste element op dat exact overeenkomt met de opgegeven CSS-kiezers. Deze methode begint met het doorkruisen van de DOM-boom om deze taak uit te voeren. Zodra het element is gevonden, past het de ingebouwde JavaScript-eigenschappen of methoden toe die in de scriptsectie zijn gedefinieerd om speciale taken uit te voeren. Deze methode wordt meestal gebruikt om de beoogde elementen te selecteren volgens de vereisten. Hiermee kunnen gebruikers alle elementen selecteren die overeenkomen met de opgegeven selector of de bepaalde die op de gegeven index is geplaatst.
Deze handleiding illustreert het gebruik van de methode 'querySelectorAll()' in JavaScript.
Hoe de methode 'querySelectorAll()' in JavaScript te gebruiken?
Om de ' querySelectorAll() ” methode, geef de CSS-selector op als argument. De CSS-kiezers omvatten 'Type, klasse en id'. Als de CSS-kiezer ongeldig is, retourneert deze een syntaxisfout, anders retourneert deze een statisch NodeList-object als standaarduitvoer.
Syntaxis
document.querySelectorAll ( CSS-kiezers )
In de bovenstaande syntaxis is de ' CSS-kiezers ” verwijzen naar alle geldige CSS-kiezers.
Laten we de hierboven gedefinieerde syntaxis praktisch gebruiken.
HTML code
Overzicht van de gegeven HTML-code:
< h2 klas = 'demonstratie' > Eerste rubriek h2 >< h3 klas = 'demonstratie' > Tweede kop h3 >
< P klas = 'demonstratie' > Eerste paragraaf P >
< P klas = 'demonstratie' > Tweede paragraaf P >
< knop bij klikken = 'jsFunc()' > Klik hier ! knop >
In de bovenstaande regels code:
- De ' ” tag voegt een subkop toe met de klasse “demo”.
- De ' ” tag definieert een tweede subkop met dezelfde klasse genaamd “demo”.
- De ' ”-tags bevatten de paragraafverklaringen met dezelfde klasse, d.w.z. “demo”.
- De '
”-tag bevat een nieuwe knop met een “onclick”-muisgebeurtenis om de functie “jsFunc()” uit te voeren.
Opmerking: De specifieke HTML-code wordt in deze handleiding gevolgd.
Voorbeeld 1: de methode 'querySelectorAll()' toepassen om elementen met dezelfde klasse te selecteren en hun kleuren te wijzigen
In dit voorbeeld wordt de methode 'querySelectorAll()' gebruikt om alle elementen te selecteren die de klasse 'demo' gebruiken.
JavaScript-code
Laten we de onderstaande code eens bekijken:
< script >functie jsFunc ( ) {
const lijst = document.querySelectorAll ( '.demo' ) ;
voor ( laten ik = 0 ; i < lijst.lengte; ik++ ) {
lijst [ i ] .stijl.kleur = 'Oranje rood' ;
}
}
script >
In de bovenstaande coderegels:
- De ' jsFunc() ” functie is gedefinieerd.
- In zijn definitie gebruikt de variabele 'lijst' de ' querySelectorAll() ” methode om alle elementen met de klasse “demo” te selecteren.
- Vervolgens de “ voor ” lus initialiseert een knooppuntenlijst om langs alle gevonden HTML-elementen met de klasse “ te itereren demo ' en wijzig hun tekstkleur met behulp van de ' stijl.kleur ' eigendom.
Uitgang
In de bovenstaande uitvoer is te zien dat de tekstkleur van de elementen met dezelfde klassenaam, d.w.z. 'demo', wordt gewijzigd bij het klikken op de knop.
Voorbeeld 2: de methode 'querySelectorAll()' toepassen om de specifieke geïndexeerde elementen te selecteren
Naast alle elementen kan de gebruiker ook het specifieke geïndexeerde element selecteren met de klasse 'demo'.
JavaScript-code
Beschouw de gegeven JavaScript-code:
< script >functie jsFunc ( ) {
const lijst = document.querySelectorAll ( 'h2.demo' ) ;
lijst [ 0 ] .stijl.kleur = 'groente' ;
}
script >
In het bovenstaande codefragment:
- De variabele 'list' selecteert het element 'h2' waarvan de klasse 'demo' is met behulp van de ' querySelectorAll() ” methode.
- Daarna specificeert de 'list' -variabele de index van het 'h2' -element om de tekstkleur te wijzigen van het 'H2' -element dat op de '0' -index is geplaatst.
Uitgang
De uitvoer laat zien dat de tekstkleur van het 'H2' -element dat op index nul is geplaatst, de klasse 'demo' heeft gewijzigd bij het klikken op de knop.
Voorbeeld 3: de methode 'querySelectorAll()' toepassen om het aantal elementen met dezelfde klasse te verkrijgen
In dit voorbeeld wordt het aantal elementen met dezelfde klasse opgehaald met behulp van de methode 'querySelectorAll()'.
HTML code
Bekijk eerst de aangepaste HTML-code van “Voorbeeld 1”:
< P ID kaart = 'voor' > P >
Voeg in de bovengenoemde HTML-code een lege alinea toe met een id 'para' aan het einde van de HTML-code 'Voorbeeld 1'.
JavaScript-code
Ga nu verder met de JavaScript-code:
< script >functie jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'voor' ) .innerHTML = knooppuntenlijst.lengte;
}
script >
Volgens het bovenstaande codefragment:
- De functie 'jsFunc()' selecteert eerst alle '
'-elementen met behulp van de ' querySelectorAll() ” methode.
- Daarna is de “ getElementById() ” methode benadert de toegevoegde lege paragraaf via zijn id “para” om deze toe te voegen met de geretourneerde waarde van de toegepaste “length” eigenschap.
Uitgang
Zoals te zien is, toont de bovenstaande uitvoer een totaal van '4' elementen die overeenkomen met de opgegeven CSS-klasseselector 'demo'.
Conclusie
De ' querySelectorAll() ” methode kan eenvoudig worden gebruikt door de CSS-kiezer als waarde op te geven. Deze methode komt overeen met elk HTML-element en selecteert degene die overeenkomen met de opgegeven selector. Zodra de elementen zijn geselecteerd, voert het de vereiste taak uit die is gedefinieerd in de scriptsectie. Deze handleiding illustreerde in het kort het gebruik van de methode 'querySelectorAll()' in JavaScript.