QuerySelector()
Būtībā querySelector() tiek izmantots kopā ar “this.template”, kas ienes elementus, kas atrodas konkrētā veidnē. Ja ir vairāki elementi, tiks ņemts vērā tikai pirmais elements. Null tiek atgriezta, ja norādītais elements neeksistē veidnē. Tas izmanto selektoru kā parametru. Tas var būt klases nosaukuma atzīme. ID netiks atbalstīts. Dažos gadījumos jums ir tādas pašas klases, bet atšķirīgas vērtības. Šajā scenārijā mums ir jāizmanto datu recid, kas iegūst elementus, pamatojoties uz vērtību.
Sintakse:
Apskatīsim, kā norādīt atlasītāju querySelector().
- this.template.querySelector(selector)
- this.template.querySelector('[data-recid='value']')
Piemēram: ja atlasītājs ir h1 tags, jums tas jānorāda kā “h1”.
1. Visos piemēros tiek izmantots šis “meta.xml” fails. Mēs to nenorādīsim katrā piemērā. LWC komponentus var pievienot jūsu ierakstu lapai, lietotņu lapai vai sākumlapai.
'1.0' ?>
2. Visos piemēros, ko mēs apspriedīsim šajā rokasgrāmatā, loģika ir norādīta kā “js” kods. Pēc tam mēs norādām ekrānuzņēmumu, kas ietver visu “js” kodu.
1. piemērs:
Vispirms mēs izveidojam h1, div, span un zibens pogas tagus ar kādu tekstu HTML failā. Mēs arī izveidojam pogu, kas iegūst iepriekšējos elementus, kad uz tās tiek noklikšķināts. Failā “js” mēs atgriežam visu šo četru elementu iekšējo tekstu, izmantojot šo.template.querySelector().
pirmaisPiemērs.html
< h1 > Sveiki, LinuxHint. Esmu h1 < / h1 >
< div > Sveiki, LinuxHint. Esmu div < / div >
< span > Sveiki, LinuxHint. Es esmu span < / span >
Sveiki, LinuxHint. Es esmu zibens ievadā < / zibens ievade>
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
getDetails ( ) {// Iegūstiet h1 taga iekšējo tekstu.
konsole. žurnāls ( šis . veidne . querySelector ( 'h1' ) . iekšējaisTeksts ) ;
// Iegūstiet div taga iekšējo tekstu.
konsole. žurnāls ( šis . veidne . querySelector ( 'div' ) . iekšējaisTeksts ) ;
// Iegūstiet span taga iekšējo tekstu.
konsole. žurnāls ( šis . veidne . querySelector ( 'span' ) . iekšējaisTeksts ) ;
// Iegūstiet zibens ievades iekšējo tekstu.
konsole. žurnāls ( šis . veidne . querySelector ( 'zibens ievade' ) . iekšējaisTeksts ) ;
}
Viss kods:
Izvade:
Pievienojiet šo komponentu jebkura objekta lapai “Ieraksts” (mēs to pievienojām konta ierakstu lapai). Pārbaudiet šo logu un dodieties uz cilni “Konsole”.
Tagad noklikšķiniet uz pogas “Saņemt informāciju”. Pēc tam jūs redzēsiet, ka innerText tiek parādīts konsolē visiem elementiem.
2. piemērs:
Izmantojiet 1. piemērā apskatīto komponentu. Norādiet divus elementus ar “h1” tagu HTML komponentā un izmantojiet querySelector() failā “js”, lai iegūtu “h1” iekšējoTekstu.
pirmaisPiemērs.html
< h1 > Sveiki, LinuxHint. Es esmu pirmais h1 < / h1 >
< h1 > Sveiki, LinuxHint. Esmu otrais h1 < / h1 >
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
getDetails ( ) {// Iegūstiet h1 taga iekšējo tekstu.
konsole. žurnāls ( šis . veidne . querySelector ( 'h1' ) . iekšējaisTeksts ) ;
}
Viss kods:
Izvade:
Ir divi elementi ar vienu un to pašu tagu. Tātad querySelector() atlasa tikai pirmo elementu. Noklikšķinot uz pogas “Saņemt informāciju”, jūs redzēsit pirmo “h1”, un iekšējais teksts tiks atgriezts konsolē.
3. piemērs:
Mēs varam arī saglabāt querySelector() mainīgajā un izmantot šo mainīgo, lai iegūtu iekšējo tekstu. Izveidosim span tagu ar tekstu un atgriezīsim innerText konsolē, saglabājot to mainīgajā.
pirmaisPiemērs.html
< span > Sveiki, LinuxHint. Es esmu spans < / span >< br >
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
getDetails ( ) {// Iegūstiet span taga iekšējo tekstu.
ļauj viņam = šis . veidne . querySelector ( 'span' ) . iekšējaisTeksts
konsole. žurnāls ( viņš ) ;
}
Viss kods:
Izvade:
4. piemērs:
Šajā piemērā mēs izveidojam pogu un ievadām tekstu (zibens ievade), kas uztvers tēmu kā virkni. Mēs nododam “zibens ievadi” kā atlasītāju metodei querySelector(). Tas tiek piešķirts mainīgajam “computer_related”. Noklikšķinot uz šīs pogas, tiek parādīta vērtība, kas atrodas šajā mainīgajā.
secondExample.html
< centrs >
< lpp > Jūsu tēma ir: < b > {computer_related} < / b > < / lpp >
< / centrs >
< / zibens karte>
< / veidne>
secondExample.js
saistīts ar datorurokturis Subject ( notikumu ) {
šis . saistīts ar datoru = šis . veidne . querySelector ( 'zibens ieeja' ) . vērtību ;
}
Viss kods:
Izvade:
5. piemērs:
Šeit mēs izmantojam datu recidu. Izveidosim pogu ar trim span tagiem, kuru atkārtojums ir “Span1”, “Span2” un “Span3” HTML failā. Atlasiet pirmo diapazonu, nosūtot “Span1” datu recidam querySelector().
trešaisPiemērs.html
< span datu recid = 'Span1' > Es esmu span-1 < / span >< br >
< span datu recid = 'Span2' > Es esmu span-2 < / span >< br >
< span datu recid = 'Span3' > Es esmu span-3 < / span >< br >
< / zibens karte>
< / veidne>
trešaisPiemērs.js
getDetails ( ) {// Iegūstiet Span1 iekšējo tekstu
konsole. žurnāls ( šis . veidne . querySelector ( '[data-recid='Span1']' ) . iekšējaisTeksts ) ;
}
Viss kods:
Izvade:
Secinājums
Mēs uzzinājām, kā izmantot querySelector(), lai piekļūtu DOM elementiem. QuerySelector() izmantoja “this.template”, lai atlasītu elementus pašreizējā veidnē. To var saglabāt mainīgā vai izmantot tieši. Abi šie ir minēti ar piemēriem. Mēs arī sniedzām piemēru, kas ietver vairākus elementus. Šajā gadījumā querySelector() atgriež pirmo elementu.