QuerySelector()
V bistvu se querySelector() uporablja s »this.template«, ki pridobi elemente, ki so prisotni v določeni predlogi. Če je elementov več, bo upošteval samo prvi element. Če navedeni element ne obstaja v predlogi, je vrnjena ničelna vrednost. Izbirnik vzame kot parameter. To je lahko oznaka imena razreda. ID ne bo podprt. V nekaterih primerih imate iste razrede, vendar različne vrednosti. V tem scenariju moramo uporabiti data-recid, ki pridobi elemente na podlagi vrednosti.
Sintaksa:
Poglejmo, kako določiti izbirnik znotraj querySelector().
- this.template.querySelector(izbirnik)
- this.template.querySelector(‘[data-recid=”value”]’)
Na primer: če je izbirnik oznaka h1, ga morate določiti kot »h1«.
1. Vsi primeri uporabljajo to datoteko »meta.xml«. Tega ne bomo navedli v vsakem primeru. Komponente LWC lahko dodate na svojo stran s posnetki, stran aplikacije ali domačo stran.
'1,0' ?>
2. V vseh primerih, o katerih bomo razpravljali v tem priročniku, je Logic na voljo kot koda »js«. Po tem določimo posnetek zaslona, ki vključuje celotno kodo »js«.
Primer 1:
Najprej ustvarimo oznake h1, div, span in strele z nekaj besedila v datoteki HTML. Ustvarimo tudi gumb, ki ob kliku dobi prejšnje elemente. V datoteki »js« vrnemo innerText vseh teh štirih elementov prek this.template.querySelector().
firstExample.html
< h1 > Pozdravljeni LinuxHint. Sem v h1 < / h1 >
< div > Pozdravljeni LinuxHint. Sem v div < / div >
< razpon > Pozdravljeni LinuxHint. Sem v razponu < / razpon >
Pozdravljeni LinuxHint. Sem v bliskovitem vnosu < / vnos strele>
< / strela-kartica>
< / predloga>
firstExample.js
getDetails ( ) {// Pridobite notranje besedilo oznake h1.
konzola. dnevnik ( to . predlogo . querySelector ( 'h1' ) . innerText ) ;
// Pridobite notranje besedilo oznake div.
konzola. dnevnik ( to . predlogo . querySelector ( 'div' ) . innerText ) ;
// Pridobite notranje besedilo oznake span.
konzola. dnevnik ( to . predlogo . querySelector ( 'razpon' ) . innerText ) ;
// Pridobite notranje besedilo vnosa strele.
konzola. dnevnik ( to . predlogo . querySelector ( 'lightning-input' ) . innerText ) ;
}
Celotna koda:
Izhod:
Dodajte to komponento na stran »Zapis« katerega koli predmeta (dodali smo jo na stran Zapis računa). Preglejte to okno in pojdite na zavihek »Konzola«.
Zdaj kliknite gumb »Pridobi podrobnosti«. Po tem boste videli, da je innerText prikazan na konzoli za vse elemente.
Primer 2:
Uporabite komponento, ki je obravnavana v primeru 1. Določite dva elementa z oznako »h1« v komponenti HTML in uporabite querySelector() v datoteki »js«, da dobite notranje besedilo »h1«.
firstExample.html
< h1 > Pozdravljeni LinuxHint. Jaz sem prvi h1 < / h1 >
< h1 > Pozdravljeni LinuxHint. Jaz sem drugi h1 < / h1 >
< / strela-kartica>
< / predloga>
firstExample.js
getDetails ( ) {// Pridobite notranje besedilo oznake h1.
konzola. dnevnik ( to . predlogo . querySelector ( 'h1' ) . innerText ) ;
}
Celotna koda:
Izhod:
Obstajata dva elementa z isto oznako. Torej querySelector() izbere samo prvi element. Ko kliknete gumb »Pridobi podrobnosti«, boste videli prvi »h1« in notranje besedilo se vrne v konzolo.
Primer 3:
V spremenljivko lahko shranimo tudi querySelector() in to spremenljivko uporabimo za pridobitev notranjega besedila. Ustvarimo oznako span z nekaj besedila in vrnimo innerText na konzolo tako, da to shranimo v spremenljivko.
firstExample.html
< razpon > Pozdravljeni LinuxHint. jaz sem span < / razpon >< št >
< / strela-kartica>
< / predloga>
firstExample.js
getDetails ( ) {// Pridobite notranje besedilo oznake span.
pusti ga = to . predlogo . querySelector ( 'razpon' ) . innerText
konzola. dnevnik ( on ) ;
}
Celotna koda:
Izhod:
Primer 4:
V tem primeru ustvarimo gumb in vnesemo besedilo (vnos strele), ki bo predmet sprejel kot niz. »Lightning-input« posredujemo kot izbirnik metodi querySelector(). Dodeljen je spremenljivki »computer_related«. Ob kliku tega gumba se prikaže vrednost, ki je prisotna v tej spremenljivki.
secondExample.html
< center >
< str > Vaša zadeva je: < b > {computer_related} < / b > < / str >
< / center >
< / strela-kartica>
< / predloga>
secondExample.js
računalniško_povezanohandleSubject ( dogodek ) {
to . računalniško_povezano = to . predlogo . querySelector ( 'vhod strele' ) . vrednost ;
}
Celotna koda:
Izhod:
Primer 5:
Tukaj uporabljamo data-recid. Ustvarimo gumb s tremi oznakami razpona z recid kot 'Span1', 'Span2' in 'Span3' v datoteki HTML. Izberite prvi razpon tako, da posredujete »Span1« data-recid v querySelector().
thirdExample.html
< razpon data-recid = 'Razpon1' > Sem v razponu-1 < / razpon >< št >
< razpon data-recid = 'Razpon2' > Sem v razponu-2 < / razpon >< št >
< razpon data-recid = 'Span3' > Sem v razponu-3 < / razpon >< št >
< / strela-kartica>
< / predloga>
thirdExample.js
getDetails ( ) {// Pridobite notranje besedilo Span1
konzola. dnevnik ( to . predlogo . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Celotna koda:
Izhod:
Zaključek
Naučili smo se, kako uporabiti querySelector() za dostop do elementov DOM. Funkcija querySelector() je uporabila »this.template« za izbiro elementov v trenutni predlogi. To je mogoče shraniti v spremenljivko ali uporabiti neposredno. Oboje je navedeno s primeri. Navedli smo tudi primer, ki vključuje več elementov. V tem primeru querySelector() vrne prvi element.