QuerySelector()
Karaniwan, ang querySelector() ay ginagamit sa 'this.template' na kumukuha ng mga elemento na nasa isang partikular na template. Kung maraming elemento, isasaalang-alang lamang nito ang unang elemento. Ang null ay ibinalik kung ang tinukoy na elemento ay hindi umiiral sa template. Kinukuha nito ang tagapili bilang isang parameter. Ito ay maaaring ang classname tag. Hindi susuportahan ang ID. Sa ilang mga kaso, mayroon kang parehong mga klase ngunit magkaibang mga halaga. Sa sitwasyong ito, kailangan nating gamitin ang data-recid na nakakakuha ng mga elemento batay sa halaga.
Syntax:
Tingnan natin kung paano tukuyin ang selector sa loob ng querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”value”]’)
Halimbawa: kung ang selector ay h1 tag, dapat mong tukuyin ito bilang 'h1'.
1. Ginagamit ng lahat ng mga halimbawa ang 'meta.xml' na file na ito. Hindi namin ito tutukuyin sa bawat halimbawa. Maaaring idagdag ang mga bahagi ng LWC sa iyong Record Page, App Page, o Home Page.
'1.0' ?>
2. Sa lahat ng mga halimbawa na tatalakayin natin sa gabay na ito, ang Logic ay ibinigay bilang 'js' code. Pagkatapos nito, tinukoy namin ang screenshot na kasama ang buong 'js' code.
Halimbawa 1:
Una, ginagawa namin ang mga tag na h1, div, span, at lightning-button na may ilang text sa HTML file. Gayundin, lumikha kami ng isang pindutan na nakakakuha ng mga nakaraang elemento kapag ito ay na-click. Sa 'js' na file, ibinabalik namin ang innerText ng lahat ng apat na elementong ito sa pamamagitan nito.template.querySelector().
firstExample.html
< variant ng lightning-card = 'Makitid' pamagat = 'Kamusta' icon- pangalan = 'standard:account' >
< h1 > Kamusta LinuxHint. nasa h1 ako < / h1 >
< div > Kamusta LinuxHint. Ako ay nasa div < / div >
< span > Kamusta LinuxHint. nasa span ako < / span >
Kamusta LinuxHint. Nasa lightning-input ako < / kidlat-input>
< variant ng lightning-button = 'base' label = 'Kumuha ng Mga Detalye' onclick = { getDetails } >< / buton ng kidlat>
< / lightning-card>
< / template>
firstExample.js
getDetails ( ) {// Kunin ang innertext ng h1 tag.
console. log ( ito . template . querySelector ( 'h1' ) . innerText ) ;
// Kunin ang innertext ng div tag.
console. log ( ito . template . querySelector ( 'div' ) . innerText ) ;
// Kunin ang innertext ng span tag.
console. log ( ito . template . querySelector ( 'span' ) . innerText ) ;
// Kunin ang innertext ng lightning-input.
console. log ( ito . template . querySelector ( 'kidlat-input' ) . innerText ) ;
}
Buong Code:
Output:
Idagdag ang bahaging ito sa pahina ng 'Record' ng anumang bagay (idinagdag namin ito sa pahina ng Record ng account). Suriin ang window na ito at pumunta sa tab na 'Console'.
Ngayon, i-click ang pindutang 'Kumuha ng Mga Detalye'. Pagkatapos nito, makikita mo na ang innerText ay ipinapakita sa console para sa lahat ng mga elemento.
Halimbawa 2:
Gamitin ang component na tinalakay sa Halimbawa 1. Tukuyin ang dalawang elemento na may tag na 'h1' sa HTML component at gamitin ang querySelector() sa 'js' file para makuha ang innerText ng 'h1'.
firstExample.html
< variant ng lightning-card = 'Makitid' pamagat = 'Kamusta' icon- pangalan = 'standard:account' >
< h1 > Kamusta LinuxHint. ako muna h1 < / h1 >
< h1 > Kamusta LinuxHint. Pangalawa h1 ako < / h1 >
< variant ng lightning-button = 'base' label = 'Kumuha ng Mga Detalye' onclick = { getDetails } >< / buton ng kidlat>
< / lightning-card>
< / template>
firstExample.js
getDetails ( ) {// Kunin ang innertext ng h1 tag.
console. log ( ito . template . querySelector ( 'h1' ) . innerText ) ;
}
Buong Code:
Output:
Mayroong dalawang elemento na may parehong tag. Kaya, pinipili lamang ng querySelector() ang unang elemento. Kapag na-click mo ang button na 'Kumuha ng Mga Detalye', makikita mo ang unang 'h1' at ibabalik ang innertext sa console.
Halimbawa 3:
Maaari din nating iimbak ang querySelector() sa isang variable at gamitin ang variable na ito para makuha ang innerText. Gumawa tayo ng span tag na may ilang text at ibalik ang innerText sa console sa pamamagitan ng pag-iimbak nito sa isang variable.
firstExample.html
< variant ng lightning-card = 'Makitid' pamagat = 'Kamusta' icon- pangalan = 'standard:account' >
< span > Kamusta LinuxHint. Ako ay span < / span >< br >
< variant ng lightning-button = 'base' label = 'Kumuha ng Mga Detalye' onclick = { getDetails } >< / buton ng kidlat>
< / lightning-card>
< / template>
firstExample.js
getDetails ( ) {// Kunin ang innertext ng span tag.
hayaan mo siya = ito . template . querySelector ( 'span' ) . innerText
console. log ( siya ) ;
}
Buong Code:
Output:
Halimbawa 4:
Sa halimbawang ito, gumawa kami ng button at input text (kidlat-input) na kukuha ng paksa bilang string. Ipinapasa namin ang 'kidlat-input' bilang tagapili sa querySelector() na pamamaraan. Ito ay itinalaga sa variable na “computer_related. Sa pag-click sa button na ito, ipinapakita ang value na nasa variable na ito.
secondExample.html
< gitna >
< p > Ang iyong paksa ay: < b > {computer_related} < / b > < / p >
< / gitna >
< / lightning-card>
< / template>
secondExample.js
computer_relatedhandleSubject ( kaganapan ) {
ito . computer_related = ito . template . querySelector ( 'kidlat-input' ) . halaga ;
}
Buong Code:
Output:
Halimbawa 5:
Dito, ginagamit namin ang data-recid. Gumawa tayo ng button na may tatlong span tag na may recid bilang 'Span1', 'Span2', at 'Span3' sa HTML file. Piliin ang unang span sa pamamagitan ng pagpasa ng 'Span1' sa data-recid sa querySelector().
thirdExample.html
< span data-recid = 'Span1' > Ako ay nasa span-1 < / span >< br >
< span data-recid = 'Span2' > Nasa span-2 ako < / span >< br >
< span data-recid = 'Span3' > Ako ay nasa span-3 < / span >< br >
< variant ng lightning-button = 'base' label = 'Kumuha ng Mga Detalye' onclick = { getDetails } >< / buton ng kidlat>
< / lightning-card>
< / template>
thirdExample.js
getDetails ( ) {// Kunin ang innerText ng Span1
console. log ( ito . template . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Buong Code:
Output:
Konklusyon
Natutunan namin kung paano gamitin ang querySelector() para ma-access ang mga elemento ng DOM. Ginamit ng querySelector() ang 'this.template' upang piliin ang mga elemento sa kasalukuyang template. Posibleng iimbak ito sa isang variable o gamitin ito nang direkta. Parehong binanggit ang mga ito na may mga halimbawa. Gayundin, nagbigay kami ng isang halimbawa na kinabibilangan ng maraming elemento. Sa kasong ito, ibinabalik ng querySelector() ang unang elemento.