QuerySelector()
I utgangspunktet brukes querySelector() med 'this.template' som henter elementene som finnes i en bestemt mal. Hvis det er flere elementer, vil det kun vurdere det første elementet. Null returneres hvis det angitte elementet ikke finnes i malen. Den tar velgeren som en parameter. Dette kan være klassenavnet. ID-en støttes ikke. I noen tilfeller har du de samme klassene, men forskjellige verdier. I dette scenariet må vi bruke data-recid som henter elementene basert på verdien.
Syntaks:
La oss se hvordan du spesifiserer velgeren inne i querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”verdi”]’)
For eksempel: hvis velgeren er h1-tag, bør du angi den som 'h1'.
1. Alle eksemplene bruker denne 'meta.xml'-filen. Vi vil ikke spesifisere dette i hvert eksempel. LWC-komponentene kan legges til Record Page, App Page eller Home Page.
'1.0' ?>
2. I alle eksemplene som vi skal diskutere i denne veiledningen, er Logic gitt som 'js'-koden. Etter det spesifiserer vi skjermbildet som inkluderer hele 'js'-koden.
Eksempel 1:
Først lager vi taggene h1, div, span og lynknapp med litt tekst i HTML-filen. Dessuten lager vi en knapp som får de forrige elementene når den klikkes. I 'js'-filen returnerer vi innerTexten til alle disse fire elementene gjennom this.template.querySelector().
firstExample.html
< h1 > Hei LinuxHint. Jeg er i h1 < / h1 >
< div > Hei LinuxHint. Jeg er i div < / div >
< span > Hei LinuxHint. Jeg er i span < / span >
Hei LinuxHint. Jeg er i lyn-inngang < / lyn-inngang>
< / lyn-kort>
< / mal>
firstExample.js
få detaljer ( ) {// Få innerteksten til h1-taggen.
konsoll. Logg ( dette . mal . querySelector ( 'h1' ) . indreTekst ) ;
// Få innerteksten til div-taggen.
konsoll. Logg ( dette . mal . querySelector ( 'div' ) . indreTekst ) ;
// Få innerteksten til span-taggen.
konsoll. Logg ( dette . mal . querySelector ( 'span' ) . indreTekst ) ;
// Få innerteksten til lyn-input.
konsoll. Logg ( dette . mal . querySelector ( 'lyn-inngang' ) . indreTekst ) ;
}
Hele koden:
Produksjon:
Legg til denne komponenten på «Record»-siden til ethvert objekt (vi la den til på konto Record-siden). Inspiser dette vinduet og gå til 'Konsoll'-fanen.
Klikk nå på 'Få detaljer'-knappen. Etter det vil du se at innerText vises på konsollen for alle elementene.
Eksempel 2:
Bruk komponenten som er omtalt i eksempel 1. Spesifiser de to elementene med 'h1'-taggen i HTML-komponenten og bruk querySelector() i 'js'-filen for å få innerText av 'h1'.
firstExample.html
< h1 > Hei LinuxHint. Jeg er første h1 < / h1 >
< h1 > Hei LinuxHint. Jeg er andre h1 < / h1 >
< / lyn-kort>
< / mal>
firstExample.js
få detaljer ( ) {// Få innerteksten til h1-taggen.
konsoll. Logg ( dette . mal . querySelector ( 'h1' ) . indreTekst ) ;
}
Hele koden:
Produksjon:
Det er to elementer med samme tag. Så, querySelector() velger bare det første elementet. Når du klikker på 'Få detaljer'-knappen, vil du se den første 'h1' og den indre teksten returneres i konsollen.
Eksempel 3:
Vi kan også lagre querySelector() i en variabel og bruke denne variabelen for å få innerText. La oss lage en span-tag med litt tekst og returnere innerText på konsollen ved å lagre denne i en variabel.
firstExample.html
< span > Hei LinuxHint. Jeg er span < / span >< br >
< / lyn-kort>
< / mal>
firstExample.js
få detaljer ( ) {// Få innerteksten til span-taggen.
la han = dette . mal . querySelector ( 'span' ) . indreTekst
konsoll. Logg ( han ) ;
}
Hele koden:
Produksjon:
Eksempel 4:
I dette eksemplet lager vi en knapp og legger inn tekst (lyn-input) som tar emnet som streng. Vi sender 'lyn-input' som velgeren til querySelector()-metoden. Den er tilordnet 'computer_related'-variabelen. Ved å klikke på denne knappen, vises verdien som er tilstede i denne variabelen.
secondExample.html
< senter >
< s > Ditt emne er: < b > {datamaskinrelatert} < / b > < / s >
< / senter >
< / lyn-kort>
< / mal>
secondExample.js
datamaskinrelaterthåndtere Emne ( begivenhet ) {
dette . datamaskinrelatert = dette . mal . querySelector ( 'lyn-inngang' ) . verdi ;
}
Hele koden:
Produksjon:
Eksempel 5:
Her bruker vi data-recid. La oss lage en knapp med tre span-tagger med recid som 'Span1', 'Span2' og 'Span3' i HTML-filen. Velg det første spennet ved å 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>
< / mal>
thirdExample.js
få detaljer ( ) {// Få innerText av Span1
konsoll. Logg ( dette . mal . querySelector ( '[data-recid='Span1']' ) . indreTekst ) ;
}
Hele koden:
Produksjon:
Konklusjon
Vi lærte hvordan vi bruker querySelector() for å få tilgang til DOM-elementene. querySelector() brukte 'this.template' for å velge elementene i gjeldende mal. Det kan være mulig å lagre dette i en variabel eller bruke det direkte. Begge disse er nevnt med eksempler. Vi ga også et eksempel som inkluderer flere elementer. I dette tilfellet returnerer querySelector() det første elementet.