QuerySelector()
Pohjimmiltaan querySelector()-funktiota käytetään 'this.template':n kanssa, joka hakee tietyssä mallissa olevat elementit. Jos elementtejä on useita, se ottaa huomioon vain ensimmäisen elementin. Null palautetaan, jos määritettyä elementtiä ei ole mallissa. Se ottaa valitsimen parametriksi. Tämä voi olla luokan nimilappu. Tunnusta ei tueta. Joissakin tapauksissa sinulla on samat luokat, mutta erilaiset arvot. Tässä skenaariossa meidän on käytettävä data-recidiä, joka saa elementit arvon perusteella.
Syntaksi:
Katsotaanpa, kuinka valitsin määritetään querySelector()-funktion sisällä.
- this.template.querySelector(valitsin)
- this.template.querySelector('[data-recid='arvo']')
Esimerkiksi: jos valitsin on h1-tunniste, määritä se muotoon 'h1'.
1. Kaikki esimerkit käyttävät tätä 'meta.xml' -tiedostoa. Emme määrittele tätä jokaisessa esimerkissä. LWC-komponentit voidaan lisätä tietuesivullesi, sovellussivullesi tai kotisivullesi.
'1.0' ?>
2. Kaikissa esimerkeissä, joista aiomme keskustella tässä oppaassa, Logic on 'js'-koodi. Tämän jälkeen määritämme kuvakaappauksen, joka sisältää koko 'js'-koodin.
Esimerkki 1:
Ensin luodaan h1-, div-, span- ja lightning-button-tunnisteet, joissa on tekstiä HTML-tiedostoon. Lisäksi luomme painikkeen, joka saa edelliset elementit, kun sitä napsautetaan. 'js'-tiedostossa palautamme kaikkien näiden neljän elementin innerText-tekstin tämän.template.querySelector(-) kautta.
firstExample.html
< h1 > Hei LinuxHint. Olen h1:ssä < / h1 >
< div > Hei LinuxHint. Olen divisioonassa < / div >
< jänneväli > Hei LinuxHint. Olen jänteessä < / jänneväli >
Hei LinuxHint. Olen salamavalossa < / salamatulo>
< / salamakortti>
< / malli>
firstExample.js
getDetails ( ) {// Hanki h1-tunnisteen sisäteksti.
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( 'h1' ) . sisäteksti ) ;
// Hanki div-tunnisteen sisäteksti.
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( 'div' ) . sisäteksti ) ;
// Hae span-tunnisteen sisäteksti.
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( 'span' ) . sisäteksti ) ;
// Hanki salamansyötteen sisäteksti.
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( 'salamatulo' ) . sisäteksti ) ;
}
Koko koodi:
Lähtö:
Lisää tämä komponentti minkä tahansa objektin 'Record'-sivulle (lisäsimme sen tilin Tietue-sivulle). Tarkista tämä ikkuna ja siirry 'Konsoli'-välilehteen.
Napsauta nyt 'Hae tiedot' -painiketta. Sen jälkeen näet, että innerText näkyy konsolissa kaikille elementeille.
Esimerkki 2:
Käytä esimerkissä 1 käsiteltyä komponenttia. Määritä kaksi elementtiä 'h1'-tunnisteella HTML-komponentissa ja käytä 'js'-tiedoston querySelector()-komentoa saadaksesi 'h1':n innerText.
firstExample.html
< h1 > Hei LinuxHint. Olen ensimmäinen h1 < / h1 >
< h1 > Hei LinuxHint. Olen toinen h1 < / h1 >
< / salamakortti>
< / malli>
firstExample.js
getDetails ( ) {// Hanki h1-tunnisteen sisäteksti.
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( 'h1' ) . sisäteksti ) ;
}
Koko koodi:
Lähtö:
Kahdella elementillä on sama tunniste. Joten querySelector() valitsee vain ensimmäisen elementin. Kun napsautat 'Hae tiedot' -painiketta, näet ensimmäisen 'h1' ja sisäteksti palautetaan konsoliin.
Esimerkki 3:
Voimme myös tallentaa querySelector() muuttujaan ja käyttää tätä muuttujaa innerTextin saamiseksi. Luodaan tekstiä sisältävä span-tunniste ja palautetaan innerText konsoliin tallentamalla tämä muuttujaan.
firstExample.html
< jänneväli > Hei LinuxHint. Olen span < / jänneväli >< br >
< / salamakortti>
< / malli>
firstExample.js
getDetails ( ) {// Hae span-tunnisteen sisäteksti.
Anna hänen = Tämä . sapluuna . querySelector ( 'span' ) . sisäteksti
konsoli. Hirsi ( hän ) ;
}
Koko koodi:
Lähtö:
Esimerkki 4:
Tässä esimerkissä luomme painikkeen ja syötämme tekstiä (salamasyöttö), joka ottaa kohteen merkkijonona. Välitämme 'lightning-input' valitsimena querySelector()-metodiin. Se on määritetty 'computer_related' -muuttujalle. Kun tätä painiketta napsautetaan, tässä muuttujassa oleva arvo tulee näkyviin.
toinenEsimerkki.html
< keskusta >
< s > Aihesi on: < b > {tietokoneeseen liittyvä} < / b > < / s >
< / keskusta >
< / salamakortti>
< / malli>
secondExample.js
tietokoneeseen liittyväkäsitteleAihe ( tapahtuma ) {
Tämä . tietokoneeseen liittyvä = Tämä . sapluuna . querySelector ( 'salamatulo' ) . arvo ;
}
Koko koodi:
Lähtö:
Esimerkki 5:
Tässä käytämme data-recidiä. Luodaan painike, jossa on kolme span-tunnistetta, joiden sanat ovat 'Span1', 'Span2' ja 'Span3' HTML-tiedostoon. Valitse ensimmäinen jakso välittämällä 'Span1' data-recidiin querySelector().
kolmasEsimerkki.html
< jänneväli data-recid = 'Span1' > Olen span-1:ssä < / jänneväli >< br >
< jänneväli data-recid = 'Span2' > Olen span-2:ssa < / jänneväli >< br >
< jänneväli data-recid = 'Span3' > Olen span-3:ssa < / jänneväli >< br >
< / salama-kortti>
< / malli>
kolmasEsimerkki.js
getDetails ( ) {// Hanki Span1:n innerText
konsoli. Hirsi ( Tämä . sapluuna . querySelector ( '[data-recid='Span1']' ) . sisäteksti ) ;
}
Koko koodi:
Lähtö:
Johtopäätös
Opimme käyttämään querySelector()-toimintoa DOM-elementtien käyttämiseen. QuerySelector() käytti 'this.template' -toimintoa valitakseen elementit nykyisestä mallista. Tämä voi olla mahdollista tallentaa muuttujaan tai käyttää sitä suoraan. Molemmat mainitaan esimerkein. Annoimme myös esimerkin, joka sisältää useita elementtejä. Tässä tapauksessa querySelector() palauttaa ensimmäisen elementin.