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