Encontrar elemento no DOM pelo valor do atributo com JavaScript

Neste artigo você vai aprender a encontrar elemento no DOM pelo valor do atributo, utilizando uma simples estratégia

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Em JS temos um método muito interessante para selecionar os elementos, na verdade são dois

Eles são baseados nos seletores de CSS, ou seja, facilitam a nossa vida

E se chamam: querySelector e querySelectorAll

A diferença é que querySelector seleciona apenas um elemento, e o All seleciona mais de um

Então você deve escolher o que é mais interessante para a sua aplicação

Vamos ver o código necessário para resgatar um elemento pelo atributo:

const img = document.querySelector('[alt="Minha imagem"]');

console.log(img)

No caso acima temos a seleção de uma única imagem, por causa do método querySelector

E esta é selecionada pelo seu atributo alt, atributo de acessibilidade

Com um valor de “Minha imagem”, caso os requisitos batam com algum elemento teremos ele na variável img

Note que você deve alterar o atributo e o valor para o que deseja selecionar, e pronto! 🙂

Conclusão

Neste artigo você viu como encontrar elemento no DOM pelo valor do atributo

Utilizamos um método chamado querySelector, mas você pode utilizar o querySelectorAll caso seja mais de um elemento

E depois bastou passar o seletor de CSS ao método, o elemento nos foi retornado e inserido na variável

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos