Neste artigo você vai aprender a como selecionar elemento por atributo em JavaScript, utilizando um método de DOM
Fala programador(a), beleza? Bora aprender mais sobre DOM!
Em JavaScript temos um objeto chamado document, ele contém todos os métodos e propriedades para trabalharmos com DOM
Um destes métodos é chamado de querySelector, e ele pode selecionar um elemento pelo seu atributo
Qualquer seletor que funcione em CSS, vai funcionar também em querySelector
O que agiliza muito o nosso trabalho, pois só utilizamos apenas um método
Veja um exemplo:
const el = document.querySelector('[data-name="teste"]')Neste caso acima estamos selecionando um elemento que contenha o atributo data-name
E o valor deste atributo é teste, você deve alterar tanto nome de atributo como também o valor
Isso nos retornará apenas o elemento que atende os requisitos
Se você quiser selecionar mais de um elemento utilize o método querySelectorAll, pois o querySelector seleciona apenas um único elemento
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
No artigo de hoje você aprendeu a como selecionar elemento por atributo em JavaScript
Foi aconselhado o método querySelector para elemento individual, e querySelectorAll para mais de um elemento
Passamos como argumento o seletor de CSS por atributo, isso nos retorna o elemento que combina com as características informadas
Os métodos de querySelector aceitam qualquer seletor de CSS
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!