querySelector är en JavaScript-metod som spelar en viktig roll i sökningen av element.
I det här avsnittet kommer vi att förstå och diskutera querySelector ()-metoden, dess användning och även titta på ett exempel för att praktiskt förstå konceptet med querySelector ()-metoden.
Introduktion av metoden JavaScript querySelector ().
En elementgränssnittsmetod som gör att vi kan söka och returnera det första elementet i dokumentet. Den hittar det elementet som matchar någon av de angivna CSS-väljarna eller gruppen av väljare. Men om inget matchande element hittas, returnerar det null. Metoden querySelector () är endast metoden för dokumentgränssnittet. Ett dokumentgränssnitt är ett gränssnitt som beskriver de vanliga metoderna samt egenskaperna för alla html , XML , eller någon annan typ av dokument.
Hur utför metoden querySelector () sökningen
Vi vet att det finns olika typer av sökningar som kan användas för att söka element. Men metoden querySelector () använder djup-första förbeställning genomgång av dokumentets noder. I den börjar genomgången med det första elementet i dokumentets markering och går sedan genom de sekventiella noderna i ordning efter antalet undernoder.
datautvinning
Syntax
element = document.querySelector(selectors);
Metoden querySelector () är en metod för dokumentgränssnitt och har därför en sådan syntax.
Den har en parameter, 'selektorer', som är en DOM-sträng och har en eller flera giltiga CSS-väljare.
Returtyp
Det kan returnera 'null' om ingen matchning hittas, och om det första elementet matchar de angivna CSS-väljarna (om några), kommer det att returnera det elementet.
Men om det inte finns någon giltig CSS-väljare kommer den att skapa ett 'SyntaxError'-undantag.
Nu, innan vi tittar på ett exempel på implementering, bör vi känna till olika typer av CSS-väljare. Om du inte är medveten, besök vår https://www.javatpoint.com/css-selector avsnittet i CSS-handledningen.
Så vi kommer nu att implementera ett exempel där vi kommer att täcka en CSS-väljare och behålla dess första elementvärde genom att använda metoden querySelector ().
Implementering av querySelector () Exempel
Nedan är en exempelkod som får oss att förstå hur querySelector ()-metoden fungerar:
nyckel för insättning av laptop
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 skillnaden mellan koden som i det första exemplet använde vi metoden querySelector () och den matade bara ut det första matchande väljarvärdet. Men när du observerar resultatet från det här andra exemplet kommer du att se att det har returnerat alla matchande värden för de angivna väljarna eller gruppen av väljare. Utdata från ovanstående kod visas nedan:
Kodförklaring
- Ovanstående kod är en kombination av html och JavaScript.
- Vi har implementerat olika CSS-väljare i koden.
- I JavaScript-sektionen har vi använt en querySelectorAll ()-metod och anropat en elementväljare av CSS.
- Så, metoden querySelectorAll () flyttar nu till koden för att passera den med förbeställningsmetoden Depth-first och returnerar alla matchande elementvärden som anges som querySlectorAll () metodparametrar.
Så på samma sätt kan vi använda metoden querySelectorAll () för de olika andra typerna av CSS-väljare också, och den kommer att returnera alla matchande värden för väljare som är specificerade som dess argument. För att implementera metoden, ersätt metoden querySelector () med metoden querySelectorAll () för olika väljare, och metoden kommer att hitta matchningen och returnera minst ett matchande värde för det angivna elementet.