Selezionatoreinterrogazione()
Fondamentalmente, querySelector() viene utilizzato con 'this.template' che recupera gli elementi presenti in un particolare modello. Se sono presenti più elementi, verrà considerato solo il primo elemento. Viene restituito null se l'elemento specificato non esiste nel modello. Prende il selettore come parametro. Questo può essere il tag classname. L'ID non sarà supportato. In alcuni casi, hai le stesse classi ma valori diversi. In questo scenario, dobbiamo utilizzare data-recid che ottiene gli elementi in base al valore.
Sintassi:
Vediamo come specificare il selettore all'interno della querySelector().
- this.template.querySelector(selettore)
- this.template.querySelector('[data-recid='valore']')
Ad esempio: se il selettore è il tag h1, dovresti specificarlo come “h1”.
1. Tutti gli esempi utilizzano questo file 'meta.xml'. Non lo specificheremo in ogni esempio. I componenti LWC possono essere aggiunti alla pagina record, alla pagina app o alla home page.
'1.0' ?>
2. In tutti gli esempi di cui parleremo in questa guida, Logic viene fornito come codice 'js'. Successivamente, specifichiamo lo screenshot che include l'intero codice 'js'.
Esempio 1:
Per prima cosa creiamo i tag h1, div, span e lightning-button con del testo nel file HTML. Inoltre, creiamo un pulsante che ottiene gli elementi precedenti quando viene cliccato. Nel file “js”, restituiamo l'innerText di tutti questi quattro elementi tramite this.template.querySelector().
primoEsempio.html
< h1 > Ciao Linux, suggerimento. Sono in h1 < / h1 >
< div > Ciao Linux, suggerimento. Sono nella div < / div >
< arco > Ciao Linux, suggerimento. Sono in span < / arco >
Ciao Linux, suggerimento. Sono in input fulmineo < / ingresso-fulmine>
< / carta-fulmine>
< / modello>
primoEsempio.js
ottieniDettagli ( ) {// Ottieni il testo interno del tag h1.
consolle. tronco d'albero ( Questo . modello . querySelector ( 'h1' ) . testointerno ) ;
// Ottiene il testo interno del tag div.
consolle. tronco d'albero ( Questo . modello . querySelector ( 'div' ) . testointerno ) ;
// Ottiene il testo interno del tag span.
consolle. tronco d'albero ( Questo . modello . querySelector ( 'intervallo' ) . testointerno ) ;
// Ottieni il testo interno dell'input Lightning.
consolle. tronco d'albero ( Questo . modello . querySelector ( 'input fulmineo' ) . testointerno ) ;
}
Intero codice:
Produzione:
Aggiungi questo componente alla pagina 'Record' di qualsiasi oggetto (lo abbiamo aggiunto alla pagina Record dell'account). Ispeziona questa finestra e vai alla scheda 'Console'.
Ora fai clic sul pulsante “Ottieni dettagli”. Successivamente, vedrai che innerText viene visualizzato sulla console per tutti gli elementi.
Esempio 2:
Utilizza il componente discusso nell'esempio 1. Specifica i due elementi con il tag 'h1' nel componente HTML e utilizza querySelector() nel file 'js' per ottenere il testo interno di 'h1'.
primoEsempio.html
< h1 > Ciao Linux, suggerimento. Sono il primo h1 < / h1 >
< h1 > Ciao Linux, suggerimento. Sono secondo h1 < / h1 >
< / carta-fulmine>
< / modello>
primoEsempio.js
ottieniDettagli ( ) {// Ottieni il testo interno del tag h1.
consolle. tronco d'albero ( Questo . modello . querySelector ( 'h1' ) . testointerno ) ;
}
Intero codice:
Produzione:
Ci sono due elementi con lo stesso tag. Pertanto, querySelector() seleziona solo il primo elemento. Quando fai clic sul pulsante 'Ottieni dettagli', vedrai il primo 'h1' e il testo interno verrà restituito nella console.
Esempio 3:
Possiamo anche memorizzare querySelector() in una variabile e utilizzare questa variabile per ottenere innerText. Creiamo un tag span con del testo e restituiamo innerText sulla console memorizzandolo in una variabile.
primoEsempio.html
< arco > Ciao Linux, suggerimento. Sono span < / arco >< fratello >
< / carta-fulmine>
< / modello>
primoEsempio.js
ottieniDettagli ( ) {// Ottiene il testo interno del tag span.
lasciarlo = Questo . modello . querySelector ( 'intervallo' ) . testointerno
consolle. tronco d'albero ( Lui ) ;
}
Intero codice:
Produzione:
Esempio 4:
In questo esempio, creiamo un pulsante e inseriamo del testo (lightning-input) che prenderà l'oggetto come stringa. Passiamo il 'lightning-input' come selettore al metodo querySelector(). È assegnato alla variabile 'computer_parent'. Facendo clic su questo pulsante, viene visualizzato il valore presente in questa variabile.
secondoEsempio.html
< centro >
< P > Il tuo oggetto è: < B > {Informatico} < / B > < / P >
< / centro >
< / carta-fulmine>
< / modello>
secondo Esempio.js
InformaticohandleSubject ( evento ) {
Questo . Informatico = Questo . modello . querySelector ( 'input fulmineo' ) . valore ;
}
Intero codice:
Produzione:
Esempio 5:
Qui utilizziamo il data-recid. Creiamo un pulsante con tre tag span con recid come 'Span1', 'Span2' e 'Span3' nel file HTML. Selezionare il primo intervallo passando 'Span1' al data-recid in querySelector().
terzoEsempio.html
< arco dati-recidi = 'Campata 1' > Sono nell'intervallo-1 < / arco >< fratello >
< arco dati-recidi = 'Campata 2' > Sono nell'intervallo-2 < / arco >< fratello >
< arco dati-recidi = 'Campata 3' > Sono nell'intervallo 3 < / arco >< fratello >
< / carta-fulmine>
< / modello>
terzoEsempio.js
ottieniDettagli ( ) {// Ottieni il testo interno di Span1
consolle. tronco d'albero ( Questo . modello . querySelector ( '[data-recid='Campata1']' ) . testointerno ) ;
}
Intero codice:
Produzione:
Conclusione
Abbiamo imparato come utilizzare querySelector() per accedere agli elementi DOM. Il querySelector() ha utilizzato 'this.template' per selezionare gli elementi nel modello corrente. È possibile memorizzarlo in una variabile o utilizzarlo direttamente. Entrambi sono menzionati con esempi. Inoltre, abbiamo fornito un esempio che include più elementi. In questo caso, querySelector() restituisce il primo elemento.