QuerySelector()
I grund och botten används querySelector() med 'this.template' som hämtar elementen som finns i en viss mall. Om det finns flera element kommer den endast att beakta det första elementet. Null returneras om det angivna elementet inte finns i mallen. Den tar väljaren som en parameter. Detta kan vara klassnamnstaggen. ID:t stöds inte. I vissa fall har du samma klasser men olika värden. I det här scenariot måste vi använda data-recid som får elementen baserat på värdet.
Syntax:
Låt oss se hur man anger väljaren inuti querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”värde”]’)
Till exempel: om väljaren är h1-tagg, bör du ange den som 'h1'.
1. Alla exempel använder denna 'meta.xml'-fil. Vi kommer inte att specificera detta i varje exempel. LWC-komponenterna kan läggas till på din postsida, appsida eller startsida.
'1.0' ?>
2. I alla exempel som vi kommer att diskutera i den här guiden tillhandahålls Logic som 'js'-koden. Efter det anger vi skärmdumpen som innehåller hela 'js'-koden.
Exempel 1:
Först skapar vi taggarna h1, div, span och lightning-button med lite text i HTML-filen. Dessutom skapar vi en knapp som får de tidigare elementen när den klickas. I 'js'-filen returnerar vi innerTexten för alla dessa fyra element genom this.template.querySelector().
firstExample.html
< h1 > Hej LinuxHint. Jag är i h1 < / h1 >
< div > Hej LinuxHint. Jag är i div < / div >
< spänna > Hej LinuxHint. Jag är i span < / spänna >
Hej LinuxHint. Jag är i blixtingång < / blixt-ingång>
< / blixtkort>
< / mall>
firstExample.js
få Detaljer ( ) {// Hämta innertexten till h1-taggen.
trösta. logga ( detta . mall . querySelector ( 'h1' ) . innerText ) ;
// Hämta innertexten till div-taggen.
trösta. logga ( detta . mall . querySelector ( 'div' ) . innerText ) ;
// Hämta innertexten av span-taggen.
trösta. logga ( detta . mall . querySelector ( 'spänna' ) . innerText ) ;
// Få innertexten av lightning-input.
trösta. logga ( detta . mall . querySelector ( 'blixtingång' ) . innerText ) ;
}
Hela koden:
Produktion:
Lägg till den här komponenten på sidan 'Record' för vilket objekt som helst (vi har lagt till den på kontots postsida). Inspektera det här fönstret och gå till fliken 'Konsol'.
Klicka nu på knappen 'Hämta detaljer'. Efter det kommer du att se att innerTexten visas på konsolen för alla element.
Exempel 2:
Använd komponenten som diskuteras i exempel 1. Ange de två elementen med taggen 'h1' i HTML-komponenten och använd querySelector() i filen 'js' för att få innerTexten av 'h1'.
firstExample.html
< h1 > Hej LinuxHint. Jag är första h1 < / h1 >
< h1 > Hej LinuxHint. Jag är andra h1 < / h1 >
< / blixtkort>
< / mall>
firstExample.js
få Detaljer ( ) {// Hämta innertexten till h1-taggen.
trösta. logga ( detta . mall . querySelector ( 'h1' ) . innerText ) ;
}
Hela koden:
Produktion:
Det finns två element med samma tagg. Så, querySelector() väljer bara det första elementet. När du klickar på knappen 'Hämta detaljer', kommer du att se den första 'h1' och den inre texten returneras i konsolen.
Exempel 3:
Vi kan också lagra querySelector() i en variabel och använda denna variabel för att få innerText. Låt oss skapa en span-tagg med lite text och returnera innerTexten på konsolen genom att lagra denna i en variabel.
firstExample.html
< spänna > Hej LinuxHint. Jag är span < / spänna >< br >
< / blixtkort>
< / mall>
firstExample.js
få Detaljer ( ) {// Hämta innertexten av span-taggen.
låt honom = detta . mall . querySelector ( 'spänna' ) . innerText
trösta. logga ( han ) ;
}
Hela koden:
Produktion:
Exempel 4:
I det här exemplet skapar vi en knapp och matar in text (blixtinmatning) som tar ämnet som sträng. Vi skickar 'blixt-ingången' som väljare till querySelector() -metoden. Den är tilldelad variabeln 'computer_related'. Genom att klicka på den här knappen visas värdet som finns i denna variabel.
secondExample.html
< Centrum >
< sid > Ditt ämne är: < b > {dator relaterad} < / b > < / sid >
< / Centrum >
< / blixtkort>
< / mall>
secondExample.js
dator relateradhantera Ämne ( händelse ) {
detta . dator relaterad = detta . mall . querySelector ( 'blixtingång' ) . värde ;
}
Hela koden:
Produktion:
Exempel 5:
Här använder vi data-recid. Låt oss skapa en knapp med tre span-taggar med recid som 'Span1', 'Span2' och 'Span3' i HTML-filen. Välj det första intervallet genom att skicka 'Span1' till data-recid i querySelector().
tredjeExempel.html
< spänna data-recid = 'Span1' > Jag är i span-1 < / spänna >< br >
< spänna data-recid = 'Span2' > Jag är i span-2 < / spänna >< br >
< spänna data-recid = 'Span3' > Jag är i span-3 < / spänna >< br >
< / blixtkort>
< / mall>
tredjeExempel.js
få Detaljer ( ) {// Hämta innerTexten av Span1
trösta. logga ( detta . mall . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Hela koden:
Produktion:
Slutsats
Vi lärde oss hur man använder querySelector() för att komma åt DOM-elementen. querySelector() använde 'this.template' för att välja elementen i den aktuella mallen. Det kan vara möjligt att lagra detta i en variabel eller använda det direkt. Båda dessa nämns med exempel. Vi gav också ett exempel som innehåller flera element. I det här fallet returnerar querySelector() det första elementet.