QuerySelector()
V zásadě se querySelector() používá s „this.template“, který načítá prvky, které jsou přítomny v konkrétní šabloně. Pokud existuje více prvků, vezme v úvahu pouze první prvek. Pokud zadaný prvek v šabloně neexistuje, je vrácena hodnota Null. Jako parametr bere selektor. Může to být značka názvu třídy. ID nebude podporováno. V některých případech máte stejné třídy, ale různé hodnoty. V tomto scénáři musíme použít data-recid, který získá prvky na základě hodnoty.
Syntax:
Podívejme se, jak určit selektor uvnitř querySelector().
- this.template.querySelector(selektor)
- this.template.querySelector(‘[data-recid=”value”]’)
Například: pokud je selektor tag h1, měli byste jej zadat jako „h1“.
1. Všechny příklady využívají tento soubor „meta.xml“. Nebudeme to u každého příkladu specifikovat. Komponenty LWC lze přidat na vaši stránku záznamu, stránku aplikace nebo domovskou stránku.
'1,0' ?>
2. Ve všech příkladech, které budeme v této příručce probírat, je logika poskytována jako kód „js“. Poté určíme snímek obrazovky, který obsahuje celý kód „js“.
Příklad 1:
Nejprve vytvoříme značky h1, div, span a lightning-button s nějakým textem v souboru HTML. Také vytvoříme tlačítko, které po kliknutí získá předchozí prvky. V souboru „js“ vrátíme innerText všech těchto čtyř prvků prostřednictvím this.template.querySelector().
firstExample.html
<šablona>< h1 > Dobrý den, LinuxHint. Jsem v h1 < / h1 >
< div > Dobrý den, LinuxHint. jsem v div < / div >
< rozpětí > Dobrý den, LinuxHint. jsem v span < / rozpětí >
Dobrý den, LinuxHint. Jsem na vstupu blesku < / bleskový vstup>
< / blesková karta>
< / šablona>
firstExample.js
getDetails ( ) {// Získání vnitřního textu značky h1.
řídicí panel. log ( tento . šablona . querySelector ( 'h1' ) . vnitřníText ) ;
// Získání vnitřního textu značky div.
řídicí panel. log ( tento . šablona . querySelector ( 'div' ) . vnitřníText ) ;
// Získání vnitřního textu značky span.
řídicí panel. log ( tento . šablona . querySelector ( 'rozpětí' ) . vnitřníText ) ;
// Získá vnitřní text lightning-input.
řídicí panel. log ( tento . šablona . querySelector ( 'blesk-input' ) . vnitřníText ) ;
}
Celý kód:
Výstup:
Přidejte tuto komponentu na stránku „Záznam“ libovolného objektu (přidali jsme ji na stránku Záznam účtu). Prohlédněte si toto okno a přejděte na kartu „Konzola“.
Nyní klikněte na tlačítko „Získat podrobnosti“. Poté uvidíte, že vnitřníText se zobrazí na konzole pro všechny prvky.
Příklad 2:
Použijte komponentu, která je popsána v příkladu 1. Zadejte dva prvky se značkou „h1“ v komponentě HTML a použijte querySelector() v souboru „js“, abyste získali innerText „h1“.
firstExample.html
<šablona>< h1 > Dobrý den, LinuxHint. Jsem první h1 < / h1 >
< h1 > Dobrý den, LinuxHint. Jsem druhý h1 < / h1 >
< / blesková karta>
< / šablona>
firstExample.js
getDetails ( ) {// Získání vnitřního textu značky h1.
řídicí panel. log ( tento . šablona . querySelector ( 'h1' ) . vnitřníText ) ;
}
Celý kód:
Výstup:
Existují dva prvky se stejnou značkou. QuerySelector() tedy vybere pouze první prvek. Když kliknete na tlačítko „Získat podrobnosti“, uvidíte první „h1“ a do konzole se vrátí vnitřní text.
Příklad 3:
Můžeme také uložit querySelector() do proměnné a použít tuto proměnnou k získání innerText. Vytvořme značku span s nějakým textem a vraťme innerText na konzoli uložením do proměnné.
firstExample.html
<šablona>< rozpětí > Dobrý den, LinuxHint. jsem span < / rozpětí < br >
< varianta s bleskem = 'základna' označení = 'Získat podrobnosti' při kliknutí = { getDetails } < / blesk-tlačítko>
< / blesková karta>
< / šablona>
firstExample.js
getDetails ( ) {// Získání vnitřního textu značky span.
nech ho = tento . šablona . querySelector ( 'rozpětí' ) . vnitřníText
řídicí panel. log ( on ) ;
}
Celý kód:
Výstup:
Příklad 4:
V tomto příkladu vytvoříme tlačítko a zadáme text (blesk-input), který bude mít předmět jako řetězec. „Lightning-input“ předáme jako selektor metodě querySelector(). Je přiřazena k proměnné „computer_related“. Po kliknutí na toto tlačítko se zobrazí hodnota přítomná v této proměnné.
secondExample.html
<šablona>< centrum >
< p > Váš předmět je: < b > {computer_related} < / b > < / p >
< / centrum >
< / blesková karta>
< / šablona>
secondExample.js
computer_relatedzvládnout Předmět ( událost ) {
tento . computer_related = tento . šablona . querySelector ( 'vstup blesku' ) . hodnota ;
}
Celý kód:
Výstup:
Příklad 5:
Zde využíváme data-recid. Vytvořme tlačítko se třemi značkami span s recid jako „Span1“, „Span2“ a „Span3“ v souboru HTML. Vyberte první rozsah předáním „Span1“ do data-recid v querySelector().
třetí příklad.html
<šablona>< rozpětí data-recid = 'Span1' > Jsem v span-1 < / rozpětí < br >
< rozpětí data-recid = 'Span2' > Jsem v span-2 < / rozpětí < br >
< rozpětí data-recid = 'Span3' > Jsem v span-3 < / rozpětí < br >
< varianta s bleskem = 'základna' označení = 'Získat podrobnosti' při kliknutí = { getDetails } < / blesk-tlačítko>
< / blesková karta>
< / šablona>
thirdExample.js
getDetails ( ) {// Získá vnitřníText Span1
řídicí panel. log ( tento . šablona . querySelector ( '[data-recid='Span1']' ) . vnitřníText ) ;
}
Celý kód:
Výstup:
Závěr
Naučili jsme se, jak používat querySelector() pro přístup k prvkům DOM. Funkce querySelector() použila „this.template“ k výběru prvků v aktuální šabloně. To může být možné uložit do proměnné nebo přímo použít. Obojí je uvedeno s příklady. Také jsme poskytli příklad, který obsahuje více prvků. V tomto případě dotaz querySelector() vrátí první prvek.