QuerySelector()
Grundlæggende bruges querySelector() med 'this.template', der henter de elementer, der er til stede i en bestemt skabelon. Hvis der er flere elementer, vil det kun overveje det første element. Null returneres, hvis det angivne element ikke findes i skabelonen. Den tager vælgeren som en parameter. Dette kan være klassenavnet. ID'et understøttes ikke. I nogle tilfælde har du de samme klasser, men forskellige værdier. I dette scenarie skal vi bruge data-recid, der henter elementerne baseret på værdien.
Syntaks:
Lad os se, hvordan du angiver vælgeren inde i querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”værdi”]’)
For eksempel: hvis vælgeren er h1 tag, skal du angive den som 'h1'.
1. Alle eksemplerne bruger denne 'meta.xml' fil. Vi vil ikke specificere dette i hvert eksempel. LWC-komponenterne kan føjes til din optagelsesside, appside eller startside.
'1.0' ?>
2. I alle de eksempler, som vi skal diskutere i denne vejledning, er Logic angivet som 'js'-koden. Derefter angiver vi skærmbilledet, der inkluderer hele 'js'-koden.
Eksempel 1:
Først opretter vi h1, div, span og lightning-button tags med noget tekst i HTML-filen. Vi opretter også en knap, der får de tidligere elementer, når der klikkes på den. I 'js'-filen returnerer vi den indre tekst af alle disse fire elementer gennem this.template.querySelector().
firstExample.html
< h1 > Hej LinuxTip. Jeg er i h1 < / h1 >
< div > Hej LinuxTip. Jeg er i div < / div >
< span > Hej LinuxTip. Jeg er i span < / span >
Hej LinuxTip. Jeg er i lyn-input < / lyn-indgang>
< / lyn-kort>
< / skabelon>
firstExample.js
få detaljer ( ) {// Hent den indre tekst af h1 tag.
konsol. log ( det her . skabelon . querySelector ( 'h1' ) . indreTekst ) ;
// Hent den indre tekst af div-tagget.
konsol. log ( det her . skabelon . querySelector ( 'div' ) . indreTekst ) ;
// Hent den indre tekst af span-tagget.
konsol. log ( det her . skabelon . querySelector ( 'span' ) . indreTekst ) ;
// Få den indre tekst af lyn-input.
konsol. log ( det her . skabelon . querySelector ( 'lyn-indgang' ) . indreTekst ) ;
}
Hele koden:
Produktion:
Føj denne komponent til 'Record'-siden for ethvert objekt (vi føjede den til konto Record-siden). Undersøg dette vindue og gå til fanen 'Konsol'.
Klik nu på knappen 'Få detaljer'. Derefter vil du se, at innerText vises på konsollen for alle elementer.
Eksempel 2:
Brug komponenten, der er beskrevet i eksempel 1. Angiv de to elementer med 'h1'-tagget i HTML-komponenten, og brug querySelector() i 'js'-filen for at få den indre tekst af 'h1'.
firstExample.html
< h1 > Hej LinuxTip. Jeg er første h1 < / h1 >
< h1 > Hej LinuxTip. Jeg er anden h1 < / h1 >
< / lyn-kort>
< / skabelon>
firstExample.js
få detaljer ( ) {// Hent den indre tekst af h1 tag.
konsol. log ( det her . skabelon . querySelector ( 'h1' ) . indreTekst ) ;
}
Hele koden:
Produktion:
Der er to elementer med samme tag. Så querySelector() vælger kun det første element. Når du klikker på knappen 'Få detaljer', vil du se den første 'h1', og den indre tekst returneres i konsollen.
Eksempel 3:
Vi kan også gemme querySelector() i en variabel og bruge denne variabel til at hente innerText. Lad os oprette et span-tag med noget tekst og returnere innerText på konsollen ved at gemme dette i en variabel.
firstExample.html
< span > Hej LinuxTip. Jeg er span < / span >< br >
< / lyn-kort>
< / skabelon>
firstExample.js
få detaljer ( ) {// Hent den indre tekst af span-tagget.
Lad ham = det her . skabelon . querySelector ( 'span' ) . indreTekst
konsol. log ( han ) ;
}
Hele koden:
Produktion:
Eksempel 4:
I dette eksempel opretter vi en knap og indtaster tekst (lyn-input), der vil tage emnet som streng. Vi sender 'lyn-input' som vælgeren til querySelector()-metoden. Den er tildelt variablen 'computer_related'. Når du klikker på denne knap, vises den værdi, der er til stede i denne variabel.
secondExample.html
< centrum >
< s > Dit emne er: < b > {computer_relateret} < / b > < / s >
< / centrum >
< / lyn-kort>
< / skabelon>
secondExample.js
computerrelaterethåndtere Emne ( begivenhed ) {
det her . computerrelateret = det her . skabelon . querySelector ( 'lyn-indgang' ) . værdi ;
}
Hele koden:
Produktion:
Eksempel 5:
Her bruger vi data-recid. Lad os oprette en knap med tre span-tags med recid som 'Span1', 'Span2' og 'Span3' i HTML-filen. Vælg det første span ved at sende 'Span1' til data-recid i querySelector().
tredjeEksempel.html
< span data-recid = 'Span1' > Jeg er i span-1 < / span >< br >
< span data-recid = 'Span2' > Jeg er i span-2 < / span >< br >
< span data-recid = 'Span3' > Jeg er i span-3 < / span >< br >
< / lyn-kort>
< / skabelon>
tredjeEksempel.js
få detaljer ( ) {// Få den indre tekst af Span1
konsol. log ( det her . skabelon . querySelector ( '[data-recid='Span1']' ) . indreTekst ) ;
}
Hele koden:
Produktion:
Konklusion
Vi lærte, hvordan man bruger querySelector() til at få adgang til DOM-elementerne. querySelector() brugte 'this.template' til at vælge elementerne i den aktuelle skabelon. Det kan være muligt at gemme denne i en variabel eller bruge den direkte. Begge disse er nævnt med eksempler. Vi gav også et eksempel, der indeholder flere elementer. I dette tilfælde returnerer querySelector() det første element.