Seletor de Consulta()
Basicamente, querySelector() é usado com “this.template” que busca os elementos que estão presentes em um determinado template. Se houver vários elementos, considerará apenas o primeiro elemento. Nulo será retornado se o elemento especificado não existir no modelo. Leva o seletor como parâmetro. Esta pode ser a tag classname. O ID não será compatível. Em alguns casos, você tem as mesmas classes, mas valores diferentes. Neste cenário, precisamos usar o data-recid que obtém os elementos com base no valor.
Sintaxe:
Vamos ver como especificar o seletor dentro de querySelector().
- this.template.querySelector(seletor)
- this.template.querySelector('[data-recid=”valor”]’)
Por exemplo: se o seletor for a tag h1, você deve especificá-lo como “h1”.
1. Todos os exemplos utilizam este arquivo “meta.xml”. Não especificaremos isso em cada exemplo. Os componentes LWC podem ser adicionados à sua página de registro, página do aplicativo ou página inicial.
'1,0' ?>
2. Em todos os exemplos que discutiremos neste guia, o Logic é fornecido como o código “js”. Depois disso, especificamos a captura de tela que inclui todo o código “js”.
Exemplo 1:
Primeiro, criamos as tags h1, div, span e lightning-button com algum texto no arquivo HTML. Além disso, criamos um botão que obtém os elementos anteriores quando é clicado. No arquivo “js”, retornamos o innerText de todos esses quatro elementos por meio de this.template.querySelector().
primeiroExemplo.html
< h1 > Olá LinuxHint. estou em h1 < / h1 >
< divisão > Olá LinuxHint. estou em div < / divisão >
< período > Olá LinuxHint. estou no intervalo < / período >
Olá LinuxHint. Estou na entrada relâmpago < / entrada relâmpago>
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
obter detalhes ( ) {// Obtém o texto interno da tag h1.
console. registro ( esse . modelo . querySelector ( 'h1' ) . Texto interno ) ;
// Obtém o texto interno da tag div.
console. registro ( esse . modelo . querySelector ( 'div' ) . Texto interno ) ;
// Obtém o texto interno da tag span.
console. registro ( esse . modelo . querySelector ( 'período' ) . Texto interno ) ;
// Obtém o texto interno da entrada relâmpago.
console. registro ( esse . modelo . querySelector ( 'entrada relâmpago' ) . Texto interno ) ;
}
Código inteiro:
Saída:
Adicione este componente à página “Registro” de qualquer objeto (nós o adicionamos à página Registro da conta). Inspecione esta janela e vá para a guia “Console”.
Agora, clique no botão “Obter detalhes”. Depois disso, você verá que innerText é exibido no console para todos os elementos.
Exemplo 2:
Utilize o componente discutido no Exemplo 1. Especifique os dois elementos com a tag “h1” no componente HTML e use querySelector() no arquivo “js” para obter o innerText de “h1”.
primeiroExemplo.html
< h1 > Olá LinuxHint. Eu sou o primeiro h1 < / h1 >
< h1 > Olá LinuxHint. Eu sou o segundo h1 < / h1 >
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
obter detalhes ( ) {// Obtém o texto interno da tag h1.
console. registro ( esse . modelo . querySelector ( 'h1' ) . Texto interno ) ;
}
Código inteiro:
Saída:
Existem dois elementos com a mesma tag. Portanto, querySelector() seleciona apenas o primeiro elemento. Ao clicar no botão “Obter detalhes”, você verá o primeiro “h1” e o texto interno será retornado no console.
Exemplo 3:
Também podemos armazenar querySelector() em uma variável e usar esta variável para obter o innerText. Vamos criar uma tag span com algum texto e retornar o innerText no console armazenando-o em uma variável.
primeiroExemplo.html
< período > Olá LinuxHint. eu sou span < / período >< br >
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
obter detalhes ( ) {// Obtém o texto interno da tag span.
let ele = esse . modelo . querySelector ( 'período' ) . texto interno
console. registro ( ele ) ;
}
Código inteiro:
Saída:
Exemplo 4:
Neste exemplo, criamos um botão e inserimos um texto (lightning-input) que receberá o assunto como string. Passamos a “entrada relâmpago” como seletor para o método querySelector(). É atribuído à variável “relacionado ao computador”. Ao clicar neste botão é exibido o valor que está presente nesta variável.
segundoExemplo.html
< Centro >
< p > Seu assunto é: < b > {relacionado ao computador} < / b > < / p >
< / Centro >
< / cartão relâmpago>
< / modelo>
segundoExemplo.js
relacionado ao computadoridentificadorSubject ( evento ) {
esse . relacionado ao computador = esse . modelo . querySelector ( 'entrada relâmpago' ) . valor ;
}
Código inteiro:
Saída:
Exemplo 5:
Aqui, utilizamos o data-recid. Vamos criar um botão com três tags span com recid como “Span1”, “Span2” e “Span3” no arquivo HTML. Selecione o primeiro intervalo passando “Span1” para o data-recid no querySelector().
terceiroExemplo.html
< período recidiva de dados = 'Span1' > Estou no span-1 < / período >< br >
< período recidiva de dados = 'Span2' > Estou no span-2 < / período >< br >
< período recidiva de dados = 'Span3' > Estou no span-3 < / período >< br >
< / cartão relâmpago>
< / modelo>
terceiroExemplo.js
obter detalhes ( ) {// Obtém o innerText do Span1
console. registro ( esse . modelo . querySelector ( '[data-recid='Span1']' ) . texto interno ) ;
}
Código inteiro:
Saída:
Conclusão
Aprendemos como utilizar querySelector() para acessar os elementos DOM. O querySelector() usou “this.template” para selecionar os elementos no modelo atual. Pode ser possível armazenar isso em uma variável ou usá-lo diretamente. Ambos são mencionados com exemplos. Além disso, fornecemos um exemplo que inclui vários elementos. Neste caso, querySelector() retorna o primeiro elemento.