Päringuvalija()
Põhimõtteliselt kasutatakse querySelector() koos 'this.template'-ga, mis toob konkreetses mallis olevad elemendid. Kui elemente on mitu, võetakse arvesse ainult esimest elementi. Null tagastatakse, kui määratud elementi mallis pole. See võtab parameetrina valija. See võib olla klassinime silt. ID-d ei toetata. Mõnel juhul on teil samad klassid, kuid erinevad väärtused. Selle stsenaariumi korral peame kasutama andmerecidi, mis hangib elemendid väärtuse alusel.
Süntaks:
Vaatame, kuidas määrata valijat querySelector() sees.
- this.template.querySelector(selector)
- this.template.querySelector('[data-recid='value']')
Näiteks: kui valija on h1 silt, peaksite määrama selle kui 'h1'.
1. Kõik näited kasutavad seda 'meta.xml' faili. Me ei täpsusta seda igas näites. LWC komponente saab lisada oma salvestuslehele, rakenduste lehele või avalehele.
'1.0' ?>
2. Kõikides näidetes, mida me selles juhendis käsitleme, on loogika js-koodina. Pärast seda määrame ekraanipildi, mis sisaldab kogu 'js' koodi.
Näide 1:
Esmalt loome märgendid h1, div, span ja välknupu märgendid koos tekstiga HTML-failis. Samuti loome nupu, mis saab klõpsamisel eelmised elemendid. Failis „js” tagastame kõigi nende nelja elemendi siseteksti läbi this.template.querySelector().
firstExample.html
< h1 > Tere LinuxHint. Olen h1-s < / h1 >
< div > Tere LinuxHint. Olen divisjonis < / div >
< ulatus > Tere LinuxHint. Ma olen span < / ulatus >
Tere LinuxHint. Olen välksisendis < / välk-sisend>
< / välk-kaart>
< / mall>
firstExample.js
hankige üksikasjad ( ) {// Hangi h1 sildi sisetekst.
konsool. logi ( see . malli . querySelector ( 'h1' ) . sisemine Tekst ) ;
// Hankige märgendi div sisetekst.
konsool. logi ( see . malli . querySelector ( 'div' ) . sisemine Tekst ) ;
// Hangi span-märgendi sisetekst.
konsool. logi ( see . malli . querySelector ( 'span' ) . sisemine Tekst ) ;
// Hangi välk-sisendi sisetekst.
konsool. logi ( see . malli . querySelector ( välk-sisend ) . sisemine Tekst ) ;
}
Kogu kood:
Väljund:
Lisage see komponent mis tahes objekti lehele 'Kirje' (lisasime selle konto kirje lehele). Kontrollige seda akent ja minge vahekaardile 'Konsool'.
Nüüd klõpsake nuppu 'Hangi üksikasjad'. Pärast seda näete, et kõigi elementide jaoks kuvatakse konsoolil sisemine tekst.
Näide 2:
Kasutage näites 1 käsitletud komponenti. Määrake HTML-i komponendis kaks elementi märgendiga 'h1' ja 'h1' siseteksti saamiseks kasutage faili 'js' käsku querySelector().
firstExample.html
< h1 > Tere LinuxHint. Olen esimene h1 < / h1 >
< h1 > Tere LinuxHint. Olen teine h1 < / h1 >
< / välk-kaart>
< / mall>
firstExample.js
hankige üksikasjad ( ) {// Hangi h1 sildi sisetekst.
konsool. logi ( see . malli . querySelector ( 'h1' ) . sisemine Tekst ) ;
}
Kogu kood:
Väljund:
Sama sildiga on kaks elementi. Seega valib querySelector() ainult esimese elemendi. Kui klõpsate nuppu 'Hangi üksikasjad', näete esimest 'h1' ja konsoolis tagastatakse sisetekst.
Näide 3:
Samuti võime querySelector() salvestada muutujas ja kasutada seda muutujat sisemise teksti hankimiseks. Loome tekstiga span-märgendi ja tagastame konsooli sisemise teksti, salvestades selle muutujasse.
firstExample.html
< ulatus > Tere LinuxHint. ma olen span < / ulatus >< br >
< / välk-kaart>
< / mall>
firstExample.js
hankige üksikasjad ( ) {// Hangi span-märgendi sisetekst.
lase tal = see . malli . querySelector ( 'span' ) . sisemine Tekst
konsool. logi ( ta ) ;
}
Kogu kood:
Väljund:
Näide 4:
Selles näites loome nupu ja sisestame teksti (välksisend), mis võtab teema stringina. Edastame 'lightning-input' valijana querySelector() meetodile. See on määratud muutujale 'arvutiga seotud'. Sellele nupule klõpsates kuvatakse selles muutujas sisalduv väärtus.
secondExample.html
< Keskus >
< lk > Teie teema on: < b > {arvutiga seotud} < / b > < / lk >
< / Keskus >
< / välk-kaart>
< / mall>
secondExample.js
arvutiga seotudkäsitlegeSubject ( sündmus ) {
see . arvutiga seotud = see . malli . querySelector ( 'väkse sisend' ) . väärtus ;
}
Kogu kood:
Väljund:
Näide 5:
Siin kasutame andmerecidi. Loome kolme ulatusesildiga nupu, mille HTML-failis on „Span1”, „Span2” ja „Span3”. Valige esimene ulatus, edastades querySelector() andmerecidile 'Span1'.
kolmasNäide.html
< ulatus andmed-recid = 'Span1' > Olen vahemikus 1 < / ulatus >< br >
< ulatus andmed-recid = 'Span2' > Olen ajavahemikus 2 < / ulatus >< br >
< ulatus andmed-recid = 'Span3' > Olen ajavahemikus 3 < / ulatus >< br >
< / välk-kaart>
< / mall>
kolmasExample.js
hankige üksikasjad ( ) {// Hangi Span1 sisemine tekst
konsool. logi ( see . malli . querySelector ( '[data-recid='Span1']' ) . sisemine Tekst ) ;
}
Kogu kood:
Väljund:
Järeldus
Õppisime, kuidas kasutada querySelector() DOM-i elementidele juurdepääsuks. QuerySelector() kasutas praeguse malli elementide valimiseks 'this.template'. Seda võib olla võimalik salvestada muutujasse või kasutada seda otse. Neid mõlemaid on näidetega mainitud. Samuti esitasime näite, mis sisaldab mitut elementi. Sel juhul tagastab querySelector() esimese elemendi.