QuerySelector()
Practic, querySelector() este folosit cu „this.template” care preia elementele care sunt prezente într-un anumit șablon. Dacă există mai multe elemente, va lua în considerare doar primul element. Null este returnat dacă elementul specificat nu există în șablon. Ia selectorul ca parametru. Aceasta poate fi eticheta cu numele clasei. ID-ul nu va fi acceptat. În unele cazuri, aveți aceleași clase, dar valori diferite. În acest scenariu, trebuie să folosim data-recid care obține elementele pe baza valorii.
Sintaxă:
Să vedem cum să specificăm selectorul în interiorul querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”valoare”]’)
De exemplu: dacă selectorul este eticheta h1, ar trebui să-l specificați ca „h1”.
1. Toate exemplele folosesc acest fișier „meta.xml”. Nu vom specifica acest lucru în fiecare exemplu. Componentele LWC pot fi adăugate la Pagina de înregistrare, Pagina de aplicație sau Pagina de pornire.
„1.0” ?>
<ținte>
2. În toate exemplele pe care le vom discuta în acest ghid, Logic este furnizat ca cod „js”. După aceea, specificăm captura de ecran care include întregul cod „js”.
Exemplul 1:
Mai întâi, creăm etichetele h1, div, span și lightning-button cu ceva text în fișierul HTML. De asemenea, creăm un buton care primește elementele anterioare atunci când este apăsat. În fișierul „js”, returnăm textul interior al tuturor acestor patru elemente prin this.template.querySelector().
firstExample.html
<șablon>< h1 > Bună LinuxHint. Sunt in h1 < / h1 >
< div > Bună LinuxHint. sunt in div < / div >
< span > Bună LinuxHint. sunt in span < / span >
Bună LinuxHint. Sunt în intrarea fulgerului < / intrare-fulger>
< / carte-fulger>
< / șablon>
firstExample.js
getDetails ( ) {// Obține textul interior al etichetei h1.
consolă. Buturuga ( acest . șablon . querySelector ( 'h1' ) . innerText ) ;
// Obține textul interior al etichetei div.
consolă. Buturuga ( acest . șablon . querySelector ( 'div' ) . innerText ) ;
// Obține textul interior al etichetei span.
consolă. Buturuga ( acest . șablon . querySelector ( 'span' ) . innerText ) ;
// Obține textul interior al intrării fulgerului.
consolă. Buturuga ( acest . șablon . querySelector ( „intrare fulger” ) . innerText ) ;
}
Întregul cod:
Ieșire:
Adăugați această componentă la pagina „Înregistrare” a oricărui obiect (am adăugat-o la pagina de înregistrare a contului). Inspectați această fereastră și accesați fila „Consolă”.
Acum, faceți clic pe butonul „Obțineți detalii”. După aceea, veți vedea că innerText este afișat pe consolă pentru toate elementele.
Exemplul 2:
Utilizați componenta care este discutată în Exemplul 1. Specificați cele două elemente cu eticheta „h1” în componenta HTML și utilizați querySelector() din fișierul „js” pentru a obține textul interior al „h1”.
firstExample.html
<șablon>< h1 > Bună LinuxHint. Sunt primul h1 < / h1 >
< h1 > Bună LinuxHint. Sunt al doilea h1 < / h1 >
< / carte-fulger>
< / șablon>
firstExample.js
getDetails ( ) {// Obține textul interior al etichetei h1.
consolă. Buturuga ( acest . șablon . querySelector ( 'h1' ) . innerText ) ;
}
Întregul cod:
Ieșire:
Există două elemente cu aceeași etichetă. Deci, querySelector() selectează doar primul element. Când faceți clic pe butonul „Obțineți detalii”, veți vedea primul „h1” și textul interior este returnat în consolă.
Exemplul 3:
De asemenea, putem stoca querySelector() într-o variabilă și să folosim această variabilă pentru a obține innerText. Să creăm o etichetă span cu ceva text și să returnăm textul interior pe consolă prin stocarea acestuia într-o variabilă.
firstExample.html
<șablon>< span > Bună LinuxHint. eu sunt span < / span >< br >
< / carte-fulger>
< / șablon>
firstExample.js
getDetails ( ) {// Obține textul interior al etichetei span.
lasă-l = acest . șablon . querySelector ( 'span' ) . innerText
consolă. Buturuga ( el ) ;
}
Întregul cod:
Ieșire:
Exemplul 4:
În acest exemplu, creăm un buton și introducem text (lightning-input) care va lua subiectul ca șir. Trecem „lightning-input” ca selector la metoda querySelector(). Este atribuită variabilei „computer_related”. La clic pe acest buton, este afișată valoarea care este prezentă în această variabilă.
secondExample.html
<șablon>< centru >
< p > Subiectul dvs. este: < b > {Legate de calculator} < / b > < / p >
< / centru >
< / carte-fulger>
< / șablon>
secondExample.js
Legate de calculatorhandleSubiect ( eveniment ) {
acest . Legate de calculator = acest . șablon . querySelector ( 'intrare-fulger' ) . valoare ;
}
Întregul cod:
Ieșire:
Exemplul 5:
Aici, folosim data-recid. Să creăm un buton cu trei etichete span cu recid ca „Span1”, „Span2” și „Span3” în fișierul HTML. Selectați primul interval trecând „Span1” la data-recid în querySelector().
al treileaExample.html
<șablon>< span date-recid = „Span1” > Sunt în span-1 < / span >< br >
< span date-recid = „Span2” > Sunt în span-2 < / span >< br >
< span date-recid = „Span3” > Sunt în span-3 < / span >< br >
< / carte-fulger>
< / șablon>
thirdExample.js
getDetails ( ) {// Obține textul interior al lui Span1
consolă. Buturuga ( acest . șablon . querySelector ( „[data-recid='Span1']” ) . innerText ) ;
}
Întregul cod:
Ieșire:
Concluzie
Am învățat cum să folosim querySelector() pentru a accesa elementele DOM. QuerySelector() a folosit „this.template” pentru a selecta elementele din șablonul curent. Poate fi posibil să stocați acest lucru într-o variabilă sau să o utilizați direct. Ambele sunt menționate cu exemple. De asemenea, am oferit un exemplu care include mai multe elemente. În acest caz, querySelector() returnează primul element.