Få alle elementer som inneholder en klasse med QuerySelector

Det er mange situasjoner der utviklere trenger å velge en gruppe elementer som deler lignende egenskaper. For eksempel å bruke noen kollektive funksjoner på de spesifiserte elementene, kan utviklere kanskje sjekke og få elementene som inneholder samme klassenavn.

Mer spesifikt gjøres å hente elementer etter klassenavn ved å bruke JavaScript -metodene, for eksempel "getElementsByClassName () ”,“ QuerySelector () ”og“ QuerySelectorAll ()”Metoder. “QuerySelector ()”Metoden gir bare den første kampen i den gitte velgeren mens “GetElementsByClassName ()” og “QuerySelectorAll ()” Metoder returnerer en rekke elementer som samsvarer med det aktuelle klassenavnet.

Denne opplæringen vil beskrive måten å hente alle elementer som inneholder samme klasse ved å bruke QuerySelector.

Hvordan få alle elementer som inneholder en klasse med QuerySelector?

Spørringsvelgeren gir bare den første forekomsten som samsvarer med klassenavnet. For å få alle elementer, bruk "QuerySelectorAll ()”Metode. Den returnerer en gruppe av alle elementer som samsvarer med den spesifiserte velgeren, for eksempel et bestemt klassenavn.

Eksempel 1: Få alle elementer som inneholder en klasse med QuerySelector () -metode

Lage knapper og tilordne en "btn”Klasse for å style dem:

Knapp
Knapp
Knapp

Nå, få alle knappelementer ved å bruke et spesifisert klassenavn ved hjelp av "QuerySelector ()”Metode:

konsoll.Logg (dokument.QuerySelector ('.btn '));

Utgangen indikerer at bare det første knappelementet er hentet ved bruk av QuerySelector () -metoden:

La oss se hva som vil skje når vi prøver å style knappene ved å bruke QuerySelector () -metoden.

Først må du lagre referansene til alle knapper i variabelen "knapp”:

var knapp = dokument.QuerySelector ('.btn ');

Bruk nå bakgrunnsfargen for alle knappene ved å bruke “stil”Eiendom:

knapp.stil.BakgrunnColor = "Grå";

Som du kan se i utgangen, brukes fargen bare på den første knappen:

Eksempel 2: Få alle elementer som inneholder en klasse med QuerySelectorAll () -metode

“QuerySelectorAll ()”Metode gir listen over elementer samsvarer med den aktuelle velgeren:

konsoll.Logg (dokument.QuerySelectorAll ('.btn '));

Produksjon

Få alle knappene ved å bruke “QuerySelectorAll ()”Metode ved å sende klassenavnet for å style dem:

var knapp = dokument.QuerySelectorAll ('.btn ');

For stylingliste over elementer, bruk for -loop -tilnærmingen til å iterere hver node og angi bakgrunnsfargen “grå”:

for (la i = 0; i < button.length; i++)
knapp [i].stil.BakgrunnColor = "Grå";

Det kan sees at alle knappene har blitt stylet:

Vi har samlet all relevant informasjon relatert til å få elementer som inneholder samme klasse med QuerySelector.

Konklusjon

For å få alle elementer i samme klasse, bruk "QuerySelectorAll ()”Metode i stedet for“QuerySelector ()”. Fordi det bare gir den første forekomsten eller elementet som inneholder det aktuelle klassenavnet. Denne opplæringen beskrev måten å hente alle HTML -elementer som har samme klassenavn.