Selektor upita()
U osnovi, querySelector() se koristi s 'this.template' koji dohvaća elemente koji su prisutni u određenom predlošku. Ako ima više elemenata, uzet će u obzir samo prvi element. Null se vraća ako navedeni element ne postoji u predlošku. Uzima selektor kao parametar. Ovo može biti oznaka naziva klase. ID neće biti podržan. U nekim slučajevima imate iste klase, ali različite vrijednosti. U ovom scenariju, moramo koristiti data-recid koji dobiva elemente na temelju vrijednosti.
Sintaksa:
Pogledajmo kako navesti selektor unutar querySelector().
- this.template.querySelector(selektor)
- this.template.querySelector(‘[data-recid=”value”]’)
Na primjer: ako je selektor oznaka h1, trebali biste je navesti kao 'h1'.
1. Svi primjeri koriste ovu datoteku 'meta.xml'. Nećemo to navoditi u svakom primjeru. Komponente LWC mogu se dodati vašoj stranici zapisa, stranici aplikacije ili početnoj stranici.
'1,0' ?>
2. U svim primjerima o kojima ćemo raspravljati u ovom vodiču, logika je navedena kao 'js' kod. Nakon toga specificiramo snimku zaslona koja uključuje cijeli 'js' kod.
Primjer 1:
Prvo stvaramo oznake h1, div, span i lightning-button s nekim tekstom u HTML datoteci. Također, kreiramo gumb koji dobiva prethodne elemente kada se klikne. U datoteci “js” vraćamo innerText sva ova četiri elementa putem this.template.querySelector().
prviPrimjer.html
< h1 > Pozdrav LinuxHint. Ja sam u h1 < / h1 >
< div > Pozdrav LinuxHint. Ja sam u div < / div >
< raspon > Pozdrav LinuxHint. Ja sam u rasponu < / raspon >
Pozdrav LinuxHint. Ja sam u munjevitom unosu < / munjevit-ulaz>
< / karta munje>
< / predložak>
firstExample.js
getDetails ( ) {// Dobivanje unutarnjeg teksta h1 oznake.
konzola. log ( ovaj . šablona . querySelector ( 'h1' ) . unutarnjiTekst ) ;
// Dobivanje unutarnjeg teksta div oznake.
konzola. log ( ovaj . šablona . querySelector ( 'div' ) . unutarnjiTekst ) ;
// Dobivanje unutarnjeg teksta span taga.
konzola. log ( ovaj . šablona . querySelector ( 'raspon' ) . unutarnjiTekst ) ;
// Dobivanje unutarnjeg teksta munjevitog unosa.
konzola. log ( ovaj . šablona . querySelector ( 'munja-ulaz' ) . unutarnjiTekst ) ;
}
Cijeli kod:
Izlaz:
Dodajte ovu komponentu na stranicu 'Zapis' bilo kojeg objekta (mi smo je dodali na stranicu Zapis računa). Pregledajte ovaj prozor i idite na karticu 'Konzola'.
Sada kliknite gumb 'Dohvati detalje'. Nakon toga ćete vidjeti da je innerText prikazan na konzoli za sve elemente.
Primjer 2:
Upotrijebite komponentu o kojoj se govori u primjeru 1. Navedite dva elementa s oznakom 'h1' u HTML komponenti i upotrijebite querySelector() u datoteci 'js' da biste dobili innerText od 'h1'.
prviPrimjer.html
< h1 > Pozdrav LinuxHint. Ja sam prvi h1 < / h1 >
< h1 > Pozdrav LinuxHint. Ja sam drugi h1 < / h1 >
< / karta munje>
< / predložak>
firstExample.js
getDetails ( ) {// Dobivanje unutarnjeg teksta h1 oznake.
konzola. log ( ovaj . šablona . querySelector ( 'h1' ) . unutarnjiTekst ) ;
}
Cijeli kod:
Izlaz:
Postoje dva elementa s istom oznakom. Dakle, querySelector() odabire samo prvi element. Kada kliknete gumb 'Dohvati detalje', vidjet ćete prvi 'h1', a unutarnji tekst se vraća u konzolu.
Primjer 3:
Također možemo pohraniti querySelector() u varijablu i koristiti ovu varijablu da dobijemo innerText. Kreirajmo oznaku raspona s nekim tekstom i vratimo innerText na konzolu pohranjujući to u varijablu.
prviPrimjer.html
< raspon > Pozdrav LinuxHint. Ja sam raspon < / raspon >< br >
< / karta munje>
< / predložak>
firstExample.js
getDetails ( ) {// Dobivanje unutarnjeg teksta span taga.
pusti ga = ovaj . šablona . querySelector ( 'raspon' ) . unutarnjiTekst
konzola. log ( on ) ;
}
Cijeli kod:
Izlaz:
Primjer 4:
U ovom primjeru stvaramo gumb i unosimo tekst (munjevit unos) koji će predmet uzeti kao niz. Prosljeđujemo “lightning-input” kao selektor metodi querySelector(). Dodjeljuje se varijabli 'computer_related'. Kada kliknete na ovaj gumb, prikazuje se vrijednost koja je prisutna u ovoj varijabli.
secondExample.html
< centar >
< str > Vaš predmet je: < b > {povezano_s računalom} < / b > < / str >
< / centar >
< / karta munje>
< / predložak>
secondExample.js
povezan_s računalomrukovati Predmetom ( događaj ) {
ovaj . povezan_s računalom = ovaj . šablona . querySelector ( 'munja-ulaz' ) . vrijednost ;
}
Cijeli kod:
Izlaz:
Primjer 5:
Ovdje koristimo data-recid. Kreirajmo gumb s tri span oznake s recid kao 'Span1', 'Span2' i 'Span3' u HTML datoteci. Odaberite prvi raspon prosljeđivanjem “Span1” u data-recid u querySelector().
thirdExample.html
< raspon data-recid = 'Span1' > Ja sam u rasponu-1 < / raspon >< br >
< raspon data-recid = 'Raspon 2' > Ja sam u rasponu-2 < / raspon >< br >
< raspon data-recid = 'Span3' > Ja sam u rasponu-3 < / raspon >< br >
< / karta munje>
< / predložak>
thirdExample.js
getDetails ( ) {// Dobivanje unutarnjeg teksta Span1
konzola. log ( ovaj . šablona . querySelector ( '[data-recid='Span1']' ) . unutarnjiTekst ) ;
}
Cijeli kod:
Izlaz:
Zaključak
Naučili smo kako koristiti querySelector() za pristup DOM elementima. QuerySelector() koristio je 'this.template' za odabir elemenata u trenutnom predlošku. To je moguće pohraniti u varijablu ili koristiti izravno. Oba su spomenuta s primjerima. Također, dali smo primjer koji uključuje više elemenata. U ovom slučaju, querySelector() vraća prvi element.