I JavaScript -programmet ditt kan det hende du må finne HTML -elementer fra CSS -velgere for å bruke eventuelle endringer på dem. JavaScript -metodene som kan hjelpe deg i denne forbindelse er "QuerySelector ()”Og“QuerySelectorAll ()”Metoder.

Denne oppskrivningen vil diskutere prosedyrene for å finne HTML-elementene av CSS-velgere. Videre vil vi også forklare bruken av QuerySelector () og QuerySelectorAll () -metoder for å finne ut elementene fra CSS -velgere, ved hjelp av eksempler. Så la oss starte!

QuerySelector () -metode for å finne elementer av CSS -velgere

Elementgrensesnittet har en “QuerySelector ()”Metode, som kan brukes til å finne elementer av CSS -velgere. QuerySelector () -metoden vil returnere en “null”Verdi hvis ikke noe matchende element blir funnet. Denne metoden bruker “dybde-første forhåndsbestilling”Traversal -metode for å krysse dokumentets noder.

Syntaks

element = dokument.QuerySelector (Selectors);

QuerySelector () -metoden tar “velgere”Som et argument som er en DOM -streng som består av en eller flere gyldige CSS -velgere.

Hvordan bruke QuerySelector () -metoden for å finne elementer av CSS -velgere

Nå vil vi vise prosedyren for å finne våre elementer ved CSS -velgere ved å bruke QuerySelector () -metoden.

Eksempel 1: Bruke metoden QuerySelector () for å finne elementer av CSS -velgere

I det første eksemplet vil metoden QuerySelector () finne ut den første

element i med klasse = "opplæringen”Og setter bakgrunnsfargen til“gul”:

!Doctype html>

Finne HTML -elementer av CSS -velgeren

QuerySelector () -metoden

Dette er Linuxhint.com = "Tutorial"

Hovedoverskriften

Første avsnitt.

Utfør ovennevnte program i en hvilken som helst kodeditor eller online kodende sandkasse, men vi vil bruke JSBIN til dette formålet:

Som du kan se bakgrunnen til den første “

”Element endres til“gul”:

Eksempel 2: Bruke metoden QuerySelector () for å finne elementer av CSS -velgere

Det undergitte programmet vil endre tekstelementet med ID = “prøve”:

Finne elementer av CSS -velgere

QuerySelector () -metoden

Vi vil endre tekstelementet med:

Dette er et p -element som har.

Å utføre den ovennevnte koden vil vise deg følgende utdata:

Eksempel 3: Bruke metoden QuerySelector () for å finne elementer av CSS -velgere

I det tredje eksemplet vil vi bruke "QuerySelector ()”Metode for å finne den første

element med foreldrene og deretter endre bakgrunnsfargen til “gul”:

Første element

Jeg er det første P -elementet og Div -elementet er min foreldre

Andre element

Jeg er det andre P -elementet og Div er elementet er min foreldre.

Klikk på den gitte knappen nedenfor for å endre bakgrunnsfargen til det første P -elementet

Endre farge

Klikk på "Endre farge”-Knappen for å endre bakgrunnsfargen på den første

element:

QuerySelectorAll () For å finne elementer av CSS -velgere

I HTML returnerer QuerySectorAll () -metoden et statisk nodelistobjekt som omfatter en samling av barneelementene i et element matchet med de spesifiserte CSS -velgerne. Indeksnumre brukes til å finne ut nodene, og starter 0.

Syntaks

element.QuerySelectorAll (Selectors)

QuerySelectorAll () -metoden tar “velgere”Som et argument, som er en DOM -streng som omfatter en eller flere gyldige CSS -velgere.

Eksempel 1: Bruke QuerySectorAll () -metode for å finne elementer av CSS -velgere

I det første eksemplet vil vi bruke QueryRectorAll () -metoden for å finne alle

elementer i dokumentet. Etter å ha gjort det, vil det sette "bakgrunnsfarge”Av den første

element til “rosa”:

Hovedoverskrift med

Første avsnitt med.

Andre avsnitt med.

Endre bakgrunnsfargen til det første P -elementet med

Endre farge

Merk: Vi lærer hvordan du finner elementer av CSS -velgere

Som du kan se, bakgrunnen til den første

elementet endres til “rosa”:

Eksempel 2: Bruke QuerySectorAll () -metode for å finne elementer av CSS -velgere

Nå skal vi skrive et JavaScript -program for å finne ut det totale antall elementer med "opplæringen”Klasse ved å bruke“lengde”Eiendom til nodelistobjektet:

Det første divelementet med


Second Div Element med

Et p -element med

Klikk på følgende knapp for å finne ut hvordan antall elementer med klasse "Tutorial"

Klikk på meg

Nå vil utdataene vise deg en “Klikk på meg”-Knappen; Klikk på den for å sjekke antall elementer med klasse = "opplæringen”:

Eksempel 3: Bruke QuerySectorAll () -metode for å finne elementer av CSS -velgere

I det følgende eksempel vil vi bruke QuerySectorAll () -metoden for å finne “H2”,“div”, Og“spenn”Elementer. Etter å ha funnet de spesifiserte elementene, vil vi endre bakgrunnsfargen til "rød":

Hovedelementet

Det andre H2 -elementet

Et divelement

Et p -element.

Et p -element som har = "farge: blå;"> Span element

Klikk på følgende knapp for å angi bakgrunnsfargen til alle H2, DIV og Span Elements.

Endre farge

Å klikke på den uthevede knappen vil endre bakgrunnsfargen på H2, Div og Span Elements:

Konklusjon

Ved hjelp av QuerySector () og QuerySectorAll () -metodene kan du finne ut elementene av CSS -velgere. De QuerySelector () Element grensesnittmetode returnerer en nodelist med det første matchede elementet. I kontrast til dette, QuerySelectorAll () Metoden returnerer et statisk nodelistobjekt med barneelementene matchet med de spesifiserte CSS -velgerne. Denne oppskrivningen diskuterte prosedyren for å finne HTML-elementene av CSS-velgere. Vi forklarte også bruken av QuerySector () og QuerySelectorAll () -metoder for å finne ut elementene av CSS -velgere.