Neste artigo você vai aprender a como selecionar elemento por innexText, vamos utilizar uma abordagem muito eficaz!
Fala programador(a), beleza? Bora aprender mais sobre seleção de elementos!
Selecionar um elemento por innerText é uma tarefa comum na programação JavaScript.
Muitas vezes, precisamos localizar elementos com base em seu conteúdo de texto, em vez de sua classe, ID ou outros atributos.
Neste artigo, exploraremos várias maneiras de selecionar elementos por innerText em JavaScript e discutiremos as vantagens e desvantagens de cada uma.
Usando o método querySelector()
Uma maneira de selecionar um elemento por innerText é usar o método querySelector().
O método querySelector() retorna o primeiro elemento que corresponde a um seletor CSS específico em um documento HTML.
Para selecionar um elemento por innerText, você pode usar o método querySelector() com um seletor CSS que corresponda ao texto que você está procurando.
Aqui está um exemplo de como fazer isso:
const elemento = document.querySelector('p:contains("Texto que eu procuro")');
Neste exemplo, o seletor CSS ‘:contains()’ é usado para encontrar o primeiro parágrafo que contém o texto “Texto que eu procuro”.
O método querySelector() retorna o elemento que corresponde ao seletor CSS.
No entanto, é importante notar que o seletor CSS ‘:contains()’ não é suportado em todos os navegadores.
Portanto, esta abordagem pode não ser a mais confiável ou compatível com todos os navegadores.
Usando o método getElementsByClassName()
Outra maneira de selecionar um elemento por innerText é usar o método getElementsByClassName().
O método getElementsByClassName() retorna uma coleção de elementos que possuem uma classe CSS específica em um documento HTML.
Para selecionar um elemento por innerText usando o método getElementsByClassName(), você pode iterar através da coleção de elementos retornados pelo método e verificar se o innerText de cada elemento corresponde ao texto que você está procurando.
Aqui está um exemplo de como fazer isso:
const elementos = document.getElementsByClassName('minha-classe');
let elementoProcurado;
for (let i = 0; i < elementos.length; i++) {
if (elementos[i].innerText === 'Texto que eu procuro') {
elementoProcurado = elementos[i];
break;
}
}
Neste exemplo, o método getElementsByClassName() é usado para encontrar todos os elementos com a classe “minha-classe”. Em seguida, um loop é usado para iterar através da coleção de elementos e verificar se o innerText de cada elemento corresponde ao texto “Texto que eu procuro”.
Quando o elemento é encontrado, ele é armazenado na variável “elementoProcurado”.
Usando o método querySelectorAll()
Uma terceira maneira de selecionar um elemento por innerText é usando o método querySelectorAll().
O método querySelectorAll() retorna uma lista de todos os elementos que correspondem a um seletor CSS específico em um documento HTML.
Para selecionar um elemento por innerText usando o método querySelectorAll(), você pode usar um seletor CSS que corresponda ao texto que você está procurando e iterar através da lista de elementos retornados pelo método.
Aqui está um exemplo de como fazer isso:
const elementos = document.querySelectorAll('p');
for (let i = 0; i < elementos.length; i++) {
if (elementos[i].innerText === 'Texto que eu procuro') {
elementoProcurado = elementos[i];
break;
}
}
Neste exemplo, o seletor CSS ‘p’ é usado para encontrar todos os parágrafos em um documento HTML.
Em seguida, um loop é usado para iterar através da lista de elementos e verificar se o innerText de cada elemento corresponde ao texto “Texto que eu procuro”.
Quando o elemento é encontrado, ele é armazenado na variável “elementoProcurado”.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Chegamos ao fim do artigo sobre como selecionar elemento por innexText!
Em resumo, selecionar um elemento por innerText é uma tarefa comum na programação JavaScript, especialmente em situações em que precisamos localizar elementos com base em seu conteúdo de texto, em vez de sua classe, ID ou outros atributos.
Neste artigo, exploramos três maneiras diferentes de selecionar elementos por innerText em JavaScript: usando o método querySelector(), o método getElementsByClassName() e o método querySelectorAll().
Cada abordagem tem suas próprias vantagens e desvantagens, e a escolha da melhor abordagem dependerá do contexto do seu projeto.
O método querySelector() é útil para encontrar rapidamente um elemento específico em um documento HTML, mas pode não ser suportado em todos os navegadores devido ao seletor CSS ‘:contains()’.
O método getElementsByClassName() é uma opção simples e direta para encontrar elementos com base em sua classe CSS e pode ser útil para iterar através de uma coleção de elementos.
O método querySelectorAll() é uma maneira eficiente de encontrar todos os elementos que correspondem a um seletor CSS específico em um documento HTML, mas pode exigir mais processamento e ser menos específico para selecionar elementos por innerText.
Independentemente da abordagem escolhida, selecionar um elemento por innerText em JavaScript é uma tarefa importante para interagir com elementos HTML e garantir a validação de dados de formulários.
Com a prática, você pode desenvolver seu próprio estilo e preferência na escolha da melhor abordagem para cada situação.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!