Como selecionar elemento por innexText com JavaScript

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!

Atenção com o seletor :contains():

Antes de seguir, um aviso que te poupa uns 20 minutos de console aberto

O :contains() não faz parte dos seletores CSS que o querySelector() entende

Ele é herança do jQuery, e é por isso que ele engasga no JavaScript puro: o navegador não reconhece o seletor e a chamada quebra na hora, reclamando que o seletor não é válido

Caso esse erro apareça no seu console, é exatamente isso que aconteceu, não é bug do seu código

A boa notícia? Dá pra fazer a mesma coisa em uma linha de JavaScript puro, e é o que vem logo abaixo 🙂

Como selecionar elemento por innerText no JavaScript puro:

A abordagem que funciona em qualquer navegador é bem direta: pega os elementos com querySelectorAll(), transforma em array e filtra pelo texto

const elemento = Array.from(document.querySelectorAll('p'))
.find(el => el.innerText.trim() === 'Texto que eu procuro')

Explicando a linha:

Array.from() converte o NodeList em array de verdade, aí tu ganha find(), filter(), map() e companhia

find() devolve o PRIMEIRO elemento em que a condição é verdadeira, ou undefined se não achar nada

trim() tira espaço e quebra de linha das pontas, que é o motivo número 1 de comparação por texto falhar sem você entender o porquê

Buscando por texto parcial:

const elemento = Array.from(document.querySelectorAll('p'))
.find(el => el.innerText.toLowerCase().includes('texto que eu procuro'))

O includes() casa com um pedaço do texto, e o toLowerCase() deixa a busca insensível a maiúscula (repare que o texto procurado também está em minúscula na comparação)

Pegando TODOS os elementos que batem:

const elementos = Array.from(document.querySelectorAll('p'))
.filter(el => el.innerText.includes('Texto que eu procuro'))

Troca find por filter e você recebe um array com todos, não só o primeiro

Tome cuidado com o seletor: se você passar '*', o navegador varre o documento inteiro, incluindo html e body… e o texto do pai contém o texto do filho, então o resultado vem sujo

Quanto mais específico o seletor, mais limpo o resultado!

innerText ou textContent? Qual usar na comparação:

Essa dúvida aparece sempre que alguém tenta comparar texto e o if teima em dar falso

innerText devolve o texto como ele aparece na tela: respeita o CSS, ignora o que está escondido e quebra a linha do jeito que foi renderizado

Como ele depende da renderização, o navegador precisa calcular o layout pra te responder, então em loop grande ele custa mais caro

textContent devolve o texto do nó inteiro, inclusive o que está escondido e o que está dentro de tag que não aparece, e é bem mais leve

Regra prática:

precisa comparar o texto "como o usuário vê"? innerText

vai varrer uma lista grande e só quer o conteúdo cru? textContent

Se a comparação falha e você jura que o texto é igual, troca um pelo outro e testa… na maioria das vezes é espaço, quebra de linha ou texto escondido no meio 😀

Cuidado: getElementsByClassName() devolve uma coleção AO VIVO

Esse detalhe pega muita gente desprevenida

O getElementsByClassName() devolve um HTMLCollection vivo, ou seja: se você alterar o DOM durante o loop, a coleção muda junto, no meio do caminho

Removeu a classe de um elemento dentro do for? O índice se desloca e o loop pula elementos sem avisar

Já o querySelectorAll() devolve um NodeList estático, uma fotografia do documento naquele instante, e o loop segue previsível

Se o seu código altera o que ele está percorrendo, prefira o querySelectorAll() ou converta a coleção pra array antes com Array.from()

Selecionando por texto com XPath (o substituto real do :contains()):

Se o que você queria mesmo era aquele comportamento de "me dá o elemento que CONTÉM esse texto", o XPath faz isso nativamente no navegador

const resultado = document.evaluate(
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null
)

const elemento = resultado.singleNodeValue

O document.evaluate() recebe a expressão, o nó onde a busca começa e o tipo de resultado que você quer de volta

Com FIRST_ORDERED_NODE_TYPE você pega só o primeiro, e ele vem dentro de singleNodeValue

Um detalhe que faz diferença: use contains(., 'texto') e não contains(text(), 'texto')

O text() olha só os nós de texto diretos, então se a palavra estiver dentro de um <span> no meio do parágrafo, ele não casa

O ponto considera o texto do elemento com tudo que está dentro dele, que é quase sempre o que você quer

Perguntas frequentes sobre selecionar elemento por innerText:

Dá pra usar :contains() no querySelector()?

Não

O :contains() é seletor do jQuery, não faz parte dos seletores CSS que o querySelector() reconhece

Em JavaScript puro, o caminho é filtrar por texto com find() ou filter(), ou usar XPath

innerText ou textContent na hora de comparar?

innerText pra comparar o texto como ele aparece na tela, textContent pra pegar o conteúdo cru, inclusive o que está escondido

O textContent é mais leve em varredura grande

Como pegar o elemento pai depois de achar pelo texto?

Com elemento.parentElement você sobe um nível

Com elemento.closest('.card') você sobe até o ancestral que casa com o seletor, que é o mais útil quando o texto está lá no fundo da estrutura

Como buscar o texto só dentro de uma parte da página?

Troca o document pelo elemento container

const lista = document.querySelector('#minha-lista')
const item = Array.from(lista.querySelectorAll('li'))
.find(el => el.innerText.trim() === 'Texto que eu procuro')

Além de mais rápido, evita casar com texto repetido em outro canto da página

Funciona com campo de formulário?

Não do jeito que você espera

Um input não tem innerText, o que o usuário digitou está em elemento.value

Já textarea, select e option cada um tem o seu jeito, então na dúvida inspecione o elemento antes de comparar

Por que selecionar por texto voltou a ser tão comum:

Quando esse artigo foi escrito, buscar elemento por texto era quase sempre coisa de gambiarra pontual

Hoje é rotina, e por um motivo bem prático: em projeto que usa framework moderno, classe e id costumam ser gerados no build e mudam do nada a cada deploy

O texto que aparece na tela, esse, muda muito menos

Por isso a seleção por texto virou a escolha padrão em automação de navegador e em teste automatizado: é o seletor que sobrevive à refatoração de CSS

A lógica continua a mesma que você viu aqui, só o contexto de uso que cresceu 🙂