QuerySelector()
Bàsicament, querySelector() s'utilitza amb 'this.template' que recull els elements que estan presents en una plantilla determinada. Si hi ha diversos elements, només considerarà el primer element. Es retorna Null si l'element especificat no existeix a la plantilla. Pren el selector com a paràmetre. Aquesta pot ser l'etiqueta classname. L'identificador no serà compatible. En alguns casos, teniu les mateixes classes però valors diferents. En aquest escenari, hem d'utilitzar el data-recid que obté els elements en funció del valor.
Sintaxi:
Vegem com especificar el selector dins del querySelector().
- this.template.querySelector(selector)
- this.template.querySelector(‘[data-recid=”valor”]’)
Per exemple: si el selector és l'etiqueta h1, hauríeu d'especificar-lo com a 'h1'.
1. Tots els exemples utilitzen aquest fitxer 'meta.xml'. No ho especificarem en cada exemple. Els components LWC es poden afegir a la vostra pàgina de registre, pàgina d'aplicació o pàgina d'inici.
'1.0' ?>
2. En tots els exemples que parlarem en aquesta guia, Logic es proporciona com a codi “js”. Després d'això, especifiquem la captura de pantalla que inclou tot el codi 'js'.
Exemple 1:
Primer, creem les etiquetes h1, div, span i lightning-button amb una mica de text al fitxer HTML. A més, creem un botó que obté els elements anteriors quan es fa clic. Al fitxer 'js', retornem el text intern de tots aquests quatre elements mitjançant this.template.querySelector().
firstExample.html
< h1 > Hola LinuxHint. Estic a h1 < / h1 >
< div > Hola LinuxHint. Estic a la div < / div >
< span > Hola LinuxHint. Estic en span < / span >
Hola LinuxHint. Estic a l'entrada del llamp < / entrada-llamp>
< / targeta-llamp>
< / plantilla>
firstExample.js
getDetails ( ) {// Obteniu el text intern de l'etiqueta h1.
consola. registre ( això . plantilla . querySelector ( 'h1' ) . text interior ) ;
// Obteniu el text intern de l'etiqueta div.
consola. registre ( això . plantilla . querySelector ( 'div' ) . text interior ) ;
// Obteniu el text intern de l'etiqueta span.
consola. registre ( això . plantilla . querySelector ( 'span' ) . text interior ) ;
// Obteniu el text intern de l'entrada de llum.
consola. registre ( això . plantilla . querySelector ( 'entrada de llampec' ) . text interior ) ;
}
Codi sencer:
Sortida:
Afegiu aquest component a la pàgina 'Registre' de qualsevol objecte (l'hem afegit a la pàgina de registre del compte). Inspeccioneu aquesta finestra i aneu a la pestanya 'Consola'.
Ara, feu clic al botó 'Obtén detalls'. Després d'això, veureu que l'innerText es mostra a la consola per a tots els elements.
Exemple 2:
Utilitzeu el component que es parla a l'exemple 1. Especifiqueu els dos elements amb l'etiqueta “h1” al component HTML i utilitzeu el querySelector() al fitxer “js” per obtenir el text intern de “h1”.
firstExample.html
< h1 > Hola LinuxHint. Sóc el primer h1 < / h1 >
< h1 > Hola LinuxHint. Sóc segon h1 < / h1 >
< / targeta-llamp>
< / plantilla>
firstExample.js
getDetails ( ) {// Obteniu el text intern de l'etiqueta h1.
consola. registre ( això . plantilla . querySelector ( 'h1' ) . text interior ) ;
}
Codi sencer:
Sortida:
Hi ha dos elements amb la mateixa etiqueta. Per tant, el querySelector() selecciona només el primer element. Quan feu clic al botó 'Obtén detalls', veureu el primer 'h1' i el text intern es retorna a la consola.
Exemple 3:
També podem emmagatzemar el querySelector() en una variable i utilitzar aquesta variable per obtenir l'innerText. Creem una etiqueta span amb una mica de text i tornem l'innerText a la consola emmagatzemant-ho en una variable.
firstExample.html
< span > Hola LinuxHint. sóc span < / span >< br >
< / targeta-llamp>
< / plantilla>
firstExample.js
getDetails ( ) {// Obteniu el text intern de l'etiqueta span.
deixa'l = això . plantilla . querySelector ( 'span' ) . text interior
consola. registre ( ell ) ;
}
Codi sencer:
Sortida:
Exemple 4:
En aquest exemple, creem un botó i introduïm text (entrada de llum) que prendrà l'assumpte com a cadena. Passem el 'lightning-input' com a selector al mètode querySelector(). S'assigna a la variable 'computer_related'. En fer clic en aquest botó, es mostra el valor que està present en aquesta variable.
segonExemple.html
< centre >
< pàg > El teu tema és: < b > {relacionat_ amb l'ordinador} < / b > < / pàg >
< / centre >
< / targeta-llamp>
< / plantilla>
secondExample.js
relacionats amb l'ordinadorhandleSubject ( esdeveniment ) {
això . relacionats amb l'ordinador = això . plantilla . querySelector ( 'entrada de llamp' ) . valor ;
}
Codi sencer:
Sortida:
Exemple 5:
Aquí, fem servir el data-recid. Creem un botó amb tres etiquetes span amb recid com 'Span1', 'Span2' i 'Span3' al fitxer HTML. Seleccioneu el primer interval passant 'Span1' al data-recid al querySelector().
tercerExemple.html
< span dades-recid = 'Span1' > Estic en span-1 < / span >< br >
< span dades-recid = 'Span2' > Estic en span-2 < / span >< br >
< span dades-recid = 'Span3' > Estic en span-3 < / span >< br >
< / targeta-llamp>
< / plantilla>
tercerExample.js
getDetails ( ) {// Obteniu el text intern de Span1
consola. registre ( això . plantilla . querySelector ( '[data-recid='Span1']' ) . text interior ) ;
}
Codi sencer:
Sortida:
Conclusió
Hem après a utilitzar el querySelector() per accedir als elements DOM. El querySelector() va utilitzar 'this.template' per seleccionar els elements de la plantilla actual. Pot ser possible emmagatzemar-ho en una variable o utilitzar-lo directament. Tots dos s'esmenten amb exemples. A més, hem proporcionat un exemple que inclou diversos elements. En aquest cas, querySelector() retorna el primer element.