querySelector er en JavaScript-metode, der spiller en afgørende rolle i søgningen efter elementer.
I dette afsnit vil vi forstå og diskutere querySelector ()-metoden, dens brug og også se på et eksempel for at forstå konceptet med querySelector ()-metoden praktisk.
Introduktion af JavaScript querySelector () metode
En elementgrænseflademetode, der gør det muligt for os at søge og returnere det første element i dokumentet. Den finder det element, der matcher med en hvilken som helst af de angivne CSS-vælgere eller gruppe af vælgere. Men hvis der ikke findes noget matchende element, returnerer det null. Metoden querySelector () er kun metoden til dokumentgrænsefladen. En dokumentgrænseflade er en grænseflade, der beskriver de almindelige metoder såvel som egenskaberne for enhver html , XML eller enhver anden form for dokument.
Hvordan udfører metoden querySelector () søgningen
Vi ved, at der er forskellige typer søgninger, som kan bruges til at søge elementer. Metoden querySelector () bruger dog dybde-første forudbestilling gennemgang af dokumentets noder. I den starter gennemgangen med det første element i dokumentets opmærkning og går derefter gennem de sekventielle noder i rækkefølge efter antallet af underordnede noder.
skjulte apps
Syntaks
element = document.querySelector(selectors);
Metoden querySelector () er en metode til dokumentgrænseflade, og den har derfor en sådan syntaks.
Den har én parameter, 'selektorer', som er en DOM-streng og har en eller flere gyldige CSS-vælgere.
Returtype
Det kan returnere 'null', hvis der ikke findes noget match, og hvis det første element matcher de angivne CSS-vælgere (hvis nogen), vil det returnere dette element.
Men hvis der ikke er nogen gyldig CSS-vælger, vil den give en 'SyntaxError'-undtagelse.
Nu, før vi ser på et eksempel på implementering, bør vi kende til forskellige typer CSS-vælgere. Hvis du ikke er klar over det, så besøg vores https://www.javatpoint.com/css-selector afsnittet i CSS-vejledningen.
Så vi vil nu implementere et eksempel, hvorunder vi vil dække en CSS-vælger og bevare dens første elementværdi ved at bruge querySelector () metoden.
Implementering af querySelector () Eksempel
Nedenfor er et eksempelkode, der vil få os til at forstå, hvordan querySelector ()-metoden fungerer:
vært linux
class='colors'>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 ('p'); console.log(e);
Nu kan du se forskellen mellem koden, der i det første eksempel brugte querySelector () metoden, og den udsendte kun den første matchende vælgerværdi. Men når du observerer outputtet fra dette andet eksempel, vil du se, at det har returneret alle matchende værdier for de specificerede vælgere eller gruppe af vælgere. Outputtet af ovenstående kode er vist nedenfor:
Kodeforklaring
- Ovenstående kode er en kombination af html og JavaScript.
- Vi har implementeret forskellige CSS-vælgere i koden.
- I JavaScript-sektionen har vi brugt en querySelectorAll ()-metode og aktiveret en elementvælger af CSS.
- Så querySelectorAll ()-metoden flytter nu til koden for at krydse den ved hjælp af Depth-first pre-order-metoden og returnerer alle de matchende elementværdier, der er angivet som querySlectorAll ()-metodeparametre.
Så på samme måde kan vi også bruge metoden querySelectorAll () til de forskellige andre typer CSS-vælgere, og den vil returnere alle de matchende værdier for vælgerne, som er angivet som dens argument. For at implementere metoden skal du erstatte metoden querySelector () med metoden querySelectorAll () for forskellige vælgere, og metoden vil finde matchet og returnere mindst én matchende værdi af det angivne element.