QuerySelector()
V zásade sa querySelector() používa s “this.template”, ktorý načíta prvky, ktoré sú prítomné v konkrétnej šablóne. Ak existuje viacero prvkov, zohľadní sa iba prvý prvok. Ak zadaný prvok v šablóne neexistuje, vráti sa hodnota Null. Volič berie ako parameter. Môže to byť značka názvu triedy. ID nebude podporované. V niektorých prípadoch máte rovnaké triedy, ale rôzne hodnoty. V tomto scenári musíme použiť data-recid, ktorý získa prvky na základe hodnoty.
Syntax:
Pozrime sa, ako zadať selektor vo vnútri querySelector().
- this.template.querySelector(selektor)
- this.template.querySelector(‘[data-recid=”value”]’)
Napríklad: ak je selektor tag h1, mali by ste ho zadať ako „h1“.
1. Všetky príklady využívajú tento súbor „meta.xml“. Nebudeme to špecifikovať v každom príklade. Komponenty LWC je možné pridať na vašu stránku záznamu, stránku aplikácie alebo domovskú stránku.
'1,0' ?>
2. Vo všetkých príkladoch, o ktorých budeme diskutovať v tejto príručke, je logika poskytovaná ako kód „js“. Potom zadáme snímku obrazovky, ktorá obsahuje celý kód „js“.
Príklad 1:
Najprv vytvoríme značky h1, div, span a lightning-button s nejakým textom v súbore HTML. Tiež vytvoríme tlačidlo, ktoré po kliknutí získa predchádzajúce prvky. V súbore „js“ vrátime innerText všetkých týchto štyroch prvkov prostredníctvom this.template.querySelector().
firstExample.html
<šablóna>< h1 > Dobrý deň, LinuxHint. Som v h1 < / h1 >
< div > Dobrý deň, LinuxHint. som v div < / div >
< rozpätie > Dobrý deň, LinuxHint. som v span < / rozpätie >
Dobrý deň, LinuxHint. Som na vstupe blesku < / bleskový vstup>
< / blesková karta>
< / šablóna>
firstExample.js
getDetails ( ) {// Získanie vnútorného textu značky h1.
konzoly. log ( toto . šablóna . querySelector ( 'h1' ) . vnútornýText ) ;
// Získanie vnútorného textu značky div.
konzoly. log ( toto . šablóna . querySelector ( 'div' ) . vnútornýText ) ;
// Získanie vnútorného textu značky span.
konzoly. log ( toto . šablóna . querySelector ( 'span' ) . vnútornýText ) ;
// Získanie vnútorného textu lightning-input.
konzoly. log ( toto . šablóna . querySelector ( „bleskový vstup“ ) . vnútornýText ) ;
}
Celý kód:
Výkon:
Pridajte tento komponent na stránku „Záznam“ ľubovoľného objektu (pridali sme ho na stránku Záznam účtu). Skontrolujte toto okno a prejdite na kartu „Konzola“.
Teraz kliknite na tlačidlo „Získať podrobnosti“. Potom uvidíte, že na konzole sa pre všetky prvky zobrazí innerText.
Príklad 2:
Využite komponent, ktorý je popísaný v príklade 1. Zadajte dva prvky so značkou „h1“ v komponente HTML a použite querySelector() v súbore „js“, aby ste získali innerText „h1“.
firstExample.html
<šablóna>< h1 > Dobrý deň, LinuxHint. Som prvý h1 < / h1 >
< h1 > Dobrý deň, LinuxHint. Som druhý h1 < / h1 >
< / blesková karta>
< / šablóna>
firstExample.js
getDetails ( ) {// Získanie vnútorného textu značky h1.
konzoly. log ( toto . šablóna . querySelector ( 'h1' ) . vnútornýText ) ;
}
Celý kód:
Výkon:
Existujú dva prvky s rovnakou značkou. Takže querySelector() vyberie iba prvý prvok. Keď kliknete na tlačidlo „Získať podrobnosti“, uvidíte prvé „h1“ a vnútorný text sa vráti do konzoly.
Príklad 3:
Môžeme tiež uložiť querySelector() do premennej a použiť túto premennú na získanie innerText. Vytvorme značku span s nejakým textom a vrátime innerText na konzolu tak, že ho uložíme do premennej.
firstExample.html
<šablóna>< rozpätie > Dobrý deň, LinuxHint. som span < / rozpätie < br >
< / blesková karta>
< / šablóna>
firstExample.js
getDetails ( ) {// Získanie vnútorného textu značky span.
nechaj ho = toto . šablóna . querySelector ( 'span' ) . vnútornýText
konzoly. log ( on ) ;
}
Celý kód:
Výkon:
Príklad 4:
V tomto príklade vytvoríme tlačidlo a zadáme text (bleskový vstup), ktorý bude mať predmet ako reťazec. Metóde querySelector() odovzdáme „lightning-input“ ako selektor. Je priradený k premennej „computer_related“. Po kliknutí na toto tlačidlo sa zobrazí hodnota, ktorá je prítomná v tejto premennej.
secondExample.html
<šablóna>< stred >
< p > Váš predmet je: < b > {computer_related} < / b > < / p >
< / stred >
< / blesková karta>
< / šablóna>
secondExample.js
computer_relatedzvládnuťPredmet ( udalosť ) {
toto . computer_related = toto . šablóna . querySelector ( 'bleskový vstup' ) . hodnotu ;
}
Celý kód:
Výkon:
Príklad 5:
Tu používame data-recid. Vytvorme tlačidlo s tromi značkami span s recid ako „Span1“, „Span2“ a „Span3“ v súbore HTML. Vyberte prvý rozsah odovzdaním „Span1“ do data-recid v querySelector().
thirdExample.html
<šablóna>< rozpätie data-recid = 'Span1' > Som v rozpätí 1 < / rozpätie < br >
< rozpätie data-recid = 'Span2' > Som v rozpätí 2 < / rozpätie < br >
< rozpätie data-recid = 'Span3' > Som v rozpätí 3 < / rozpätie < br >
< / blesková karta>
< / šablóna>
thirdExample.js
getDetails ( ) {// Získanie vnútorného textu Span1
konzoly. log ( toto . šablóna . querySelector ( '[data-recid='Span1']' ) . vnútornýText ) ;
}
Celý kód:
Výkon:
Záver
Naučili sme sa, ako používať querySelector() na prístup k prvkom DOM. DotazSelector() použil „this.template“ na výber prvkov v aktuálnej šablóne. To môže byť možné uložiť do premennej alebo priamo použiť. Obidve sú uvedené s príkladmi. Poskytli sme aj príklad, ktorý obsahuje viacero prvkov. V tomto prípade querySelector() vráti prvý prvok.