querySelector er en JavaScript-metode som spiller en viktig rolle i søk etter elementer.

I denne delen vil vi forstå og diskutere querySelector ()-metoden, dens bruk og også se over et eksempel for å forstå konseptet med querySelector ()-metoden praktisk.

Vi introduserer JavaScript querySelector ()-metoden

En elementgrensesnittmetode som gjør oss i stand til å søke og returnere det første elementet i dokumentet. Den finner det elementet som samsvarer med en av de angitte CSS-velgerne eller gruppen av velgere. Men hvis det ikke finnes noe samsvarende element, returnerer det null. Metoden querySelector () er bare metoden for dokumentgrensesnittet. Et dokumentgrensesnitt er et grensesnitt som beskriver de vanlige metodene så vel som egenskapene for alle html , XML , eller andre typer dokumenter.

Hvordan utfører querySelector ()-metoden søket

Vi vet at det finnes ulike typer søk som kan brukes til å søke elementer. Imidlertid bruker querySelector ()-metoden dybde-første forhåndsbestilling kryssing av nodene i dokumentet. I den starter traverseringen med det første elementet i dokumentets markering og går deretter gjennom de sekvensielle nodene i rekkefølge etter antall undernoder.

skjulte apper

Syntaks

 element = document.querySelector(selectors); 

Metoden querySelector () er en metode for dokumentgrensesnitt, og den har derfor en slik syntaks.

Den har én parameter, 'selektorer', som er en DOM-streng og har en eller flere gyldige CSS-velgere.

Returtype

Det kan returnere 'null' hvis ingen samsvar blir funnet, og hvis det første elementet samsvarer med de spesifiserte CSS-velgerne (hvis noen), vil det returnere det elementet.

Men hvis det ikke er noen gyldig CSS-velger, vil den gi et 'SyntaxError'-unntak.

Nå, før vi ser på et eksempelimplementering, bør vi vite om ulike typer CSS-velgere. Hvis du ikke er klar, besøk vår https://www.javatpoint.com/css-selector delen av CSS-opplæringen.

Så vi vil nå implementere et eksempel der vi vil dekke en CSS-velger og beholde dens første elementverdi ved å bruke querySelector ()-metoden.

Implementering av querySelector () Eksempel

Nedenfor er en eksempelkode som vil få oss til å forstå hvordan querySelector ()-metoden fungerer:

mylivecricket alternativ

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

Nå kan du se forskjellen mellom koden som i det første eksemplet brukte vi querySelector ()-metoden og den ga bare ut den første matchende velgerverdien. Men når du observerer resultatet fra dette andre eksemplet, vil du se at det har returnert alle samsvarende verdier til de spesifiserte velgerne eller gruppen av velgere. Utgangen av koden ovenfor er vist nedenfor:

Kodeforklaring

• Koden ovenfor er en kombinasjon av html og JavaScript.
• Vi har implementert forskjellige CSS-velgere i koden.
• I JavaScript-delen har vi brukt en querySelectorAll ()-metode og påkalt en elementvelger av CSS.
• Så querySelectorAll ()-metoden flytter nå til koden for å krysse den ved hjelp av Depth-first pre-order-metoden og returnerer alle samsvarende elementverdier som er spesifisert som querySlectorAll ()-metodeparametere.

Så på samme måte kan vi bruke querySelectorAll ()-metoden for de forskjellige andre typene CSS-velgere også, og den vil returnere alle samsvarende verdier til velgerne som er spesifisert som argumentet. For å implementere metoden, erstatt metoden querySelector () med metoden querySelectorAll () for forskjellige velgere, og metoden vil finne samsvaret og returnere minst én samsvarende verdi av det spesifiserte elementet.