Neste artigo você vai aprender a como selecionar todos os elementos por um atributo com JavaScript, utilizando uma função de DOM
Fala programador(a), beleza? Bora aprender mais sobre seleção de elementos JavaScript!
Há uns poucos anos foram implementados dois métodos de seleção de elementos em JavaScript
Que são:
- querySelector;
- querySelectorAll;
O primeiro seleciona um elemento, e o outro um ou mais, já sabe qual vamos utilizar, certo?
Mas a grande sacada é que ele nos permite a colocar uma regra de CSS como seletor, isso facilita muito as coisas
Veja um exemplo de seleção de elementos por atributos:
const elements = document.querySelectorAll('[meu-atributo]');
Veja agora um por classe:
const items = document.querySelectorAll(".minha-classe");
Assim resolvemos os nosso problemas!
Agora você pode selecionar qualquer elemento que quiser, basta colocar o seletor de CSS que ele possui
Pode ser um atributo, uma tag, id ou classe
Conclusão
No artigo de hoje você viu como selecionar todos os elementos por um atributo com JavaScript
Utilizamos o método querySelectorAll, que como argumento recebe uma regra de seleção CSS
E depois nos retorna uma lista dos elementos selecionados
Que podem ser obtidos por qualquer tipo de seletor: atributo, classe, id ou até mesmo a própria tag do elemento
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 curso