Como selecionar todos os elementos por um atributo com JavaScript

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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