QuerySelector()
Iš esmės querySelector() naudojamas su 'this.template', kuris gauna elementus, esančius tam tikrame šablone. Jei yra keli elementai, bus atsižvelgta tik į pirmąjį elementą. Nulis grąžinamas, jei nurodyto elemento šablone nėra. Jis pasirenka parinkiklį kaip parametrą. Tai gali būti klasės pavadinimo žyma. ID nebus palaikomas. Kai kuriais atvejais turite tas pačias klases, bet skirtingas vertybes. Pagal šį scenarijų turime naudoti duomenų recidą, kuris gauna elementus pagal vertę.
Sintaksė:
Pažiūrėkime, kaip nurodyti parinkiklį querySelector().
- this.template.querySelector(selector)
- this.template.querySelector('[data-recid='value']')
Pavyzdžiui: jei parinkiklis yra h1 žyma, turėtumėte nurodyti jį kaip „h1“.
1. Visuose pavyzdžiuose naudojamas šis „meta.xml“ failas. Kiekviename pavyzdyje to nenurodysime. LWC komponentus galima įtraukti į įrašų puslapį, programos puslapį arba pagrindinį puslapį.
'1.0' ?>
2. Visuose pavyzdžiuose, kuriuos aptarsime šiame vadove, logika pateikiama kaip „js“ kodas. Po to nurodome ekrano kopiją, kurioje yra visas „js“ kodas.
1 pavyzdys:
Pirmiausia sukuriame h1, div, span ir žaibo mygtuko žymas su tekstu HTML faile. Taip pat sukuriame mygtuką, kuris spustelėjus gauna ankstesnius elementus. Faile „js“ grąžiname visų šių keturių elementų vidinį tekstą per this.template.querySelector().
pirmasisPavyzdys.html
<šablonas><žaibo kortos variantas = 'Siauras' titulą = 'Sveiki' piktograma - vardas = 'standartas: paskyra' >
< h1 > Sveiki, LinuxHint. Aš esu h1 < / h1 >
< div > Sveiki, LinuxHint. Aš esu divi < / div >
< span > Sveiki, LinuxHint. Aš esu span < / span >
<žaibo įvestis tipo = 'tekstas' variantas = 'standartas' vardas = 'vardas' etiketė = 'teksto įvestis' >
Sveiki, LinuxHint. Aš esu žaibo įvedime < / žaibo įvestis>
<žaibo mygtuko variantas = 'bazė' etiketė = „Gaukite detales“ paspaudus = { gautiDetails } >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
firstExample.js
gautiDetails ( ) {// Gaukite h1 žymos vidinį tekstą.
konsolė. žurnalas ( tai . šabloną . querySelector ( 'h1' ) . vidinisTekstas ) ;
// Gaukite vidinį div žymos tekstą.
konsolė. žurnalas ( tai . šabloną . querySelector ( 'div' ) . vidinisTekstas ) ;
// Gaukite span žymos vidinį tekstą.
konsolė. žurnalas ( tai . šabloną . querySelector ( 'span' ) . vidinisTekstas ) ;
// Gaukite žaibo įvesties vidinį tekstą.
konsolė. žurnalas ( tai . šabloną . querySelector ( 'žaibo įvestis' ) . vidinisTekstas ) ;
}
Visas kodas:
Išvestis:
Pridėkite šį komponentą į bet kurio objekto puslapį „Įrašas“ (įtraukėme jį į paskyros įrašų puslapį). Patikrinkite šį langą ir eikite į skirtuką „Konsolė“.
Dabar spustelėkite mygtuką „Gauti informaciją“. Po to pamatysite, kad konsolėje rodomas visų elementų vidinis tekstas.
2 pavyzdys:
Naudokite komponentą, aptartą 1 pavyzdyje. Nurodykite du elementus su „h1“ žyma HTML komponente ir naudokite querySelector() faile „js“, kad gautumėte „h1“ vidinį tekstą.
pirmasisPavyzdys.html
<šablonas><žaibo kortos variantas = 'Siauras' titulą = 'Sveiki' piktograma - vardas = 'standartas: paskyra' >
< h1 > Sveiki, LinuxHint. Aš pirmas h1 < / h1 >
< h1 > Sveiki, LinuxHint. Esu antras h1 < / h1 >
<žaibo mygtuko variantas = 'bazė' etiketė = „Gaukite detales“ paspaudus = { gautiDetails } >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
firstExample.js
gautiDetails ( ) {// Gaukite h1 žymos vidinį tekstą.
konsolė. žurnalas ( tai . šabloną . querySelector ( 'h1' ) . vidinisTekstas ) ;
}
Visas kodas:
Išvestis:
Yra du elementai su ta pačia žyma. Taigi, querySelector() pasirenka tik pirmąjį elementą. Kai paspausite mygtuką „Gauti informaciją“, pamatysite pirmąjį „h1“, o vidinis tekstas bus grąžintas konsolėje.
3 pavyzdys:
Taip pat galime saugoti querySelector() kintamajame ir naudoti šį kintamąjį vidiniam tekstui gauti. Sukurkime span žymą su tekstu ir grąžinkime vidinį tekstą konsolėje, išsaugodami jį kintamajame.
pirmasisPavyzdys.html
<šablonas><žaibo kortos variantas = 'Siauras' titulą = 'Sveiki' piktograma - vardas = 'standartas: paskyra' >
< tarpas > Sveiki, LinuxHint. Aš esu spanas < / tarpas >< br >
<žaibo mygtuko variantas = 'bazė' etiketė = „Gaukite detales“ paspaudus = { gautiDetails } >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
firstExample.js
gautiDetails ( ) {// Gaukite span žymos vidinį tekstą.
leisk jam = tai . šabloną . querySelector ( 'span' ) . vidinisTekstas
konsolė. žurnalas ( jis ) ;
}
Visas kodas:
Išvestis:
4 pavyzdys:
Šiame pavyzdyje sukuriame mygtuką ir įvedame tekstą (žaibo įvestis), kuris paims temą kaip eilutę. Perduodame „žaibo įvestį“ kaip parinkiklį querySelector() metodui. Jis priskiriamas kintamajam „computer_related“. Spustelėjus šį mygtuką, rodoma šiame kintamajame esanti reikšmė.
secondExample.html
<šablonas><žaibo korta titulą = 'Tema' >
< centras >
<žaibo įvestis etiketė = 'Įveskite temą' vertė = { susijęs su kompiuteriu } >< / žaibo įvestis>
< p > Jūsų tema yra: < b > {computer_related} < / b > < / p >
< / centras >
<žaibo mygtukas etiketė = 'Pasirinkti čia' paspaudus = { tvarkytiSubject } >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
secondExample.js
susijęs su kompiuteriutvarkytiSubject ( įvykis ) {
tai . susijęs su kompiuteriu = tai . šabloną . querySelector ( 'žaibo įvestis' ) . vertė ;
}
Visas kodas:
Išvestis:
5 pavyzdys:
Čia mes naudojame duomenų recidą. Sukurkime mygtuką su trimis span žymomis, kurių HTML faile yra „Span1“, „Span2“ ir „Span3“. Pasirinkite pirmąjį intervalą, perduodami „Span1“ į duomenų recidą užklausojeSelector().
trečiasPavyzdys.html
<šablonas><žaibo korta titulą = „Identifikavimas pagal duomenų ID“ >
< span duomenų recidas = 'Span1' > Aš esu 1 intervale < / span >< br >
< span duomenų recidas = 'Span2' > Aš esu 2 intervale < / span >< br >
< span duomenų recidas = 'Span3' > Aš esu 3 intervale < / span >< br >
<žaibo mygtuko variantas = 'bazė' etiketė = „Gaukite detales“ paspaudus = { gautiDetails } >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
trečiasPavyzdys.js
gautiDetails ( ) {// Gaukite vidinį Span1 tekstą
konsolė. žurnalas ( tai . šabloną . querySelector ( '[data-recid='Span1']' ) . vidinisTekstas ) ;
}
Visas kodas:
Išvestis:
Išvada
Sužinojome, kaip naudoti querySelector() norėdami pasiekti DOM elementus. querySelector() naudojo „this.template“, kad pasirinktų elementus dabartiniame šablone. Tai gali būti įmanoma išsaugoti kintamajame arba naudoti tiesiogiai. Abu jie paminėti su pavyzdžiais. Taip pat pateikėme pavyzdį, kuriame yra keli elementai. Šiuo atveju querySelector() grąžina pirmąjį elementą.