Como fazer um loop em HTMLCollection de JavaScript

Neste artigo você vai aprender a como fazer um loop em HTMLCollection de JavaScript, ou seja, percorrer os elementos desta espécie de array

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

A HTMLCollection é uma lista de itens obtida através do DOM

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

Desta maneira teremos uma espécie de array, que precisamos iterar entre os elementos para fazer alguma manipulação

Porém as maneiras convencionais não funcionam como esperado, então o que podemos fazer?

Para iterar nesta lista de itens vamos utilizar o operador for … of

Que é uma estrutura de repetição que pode iterar entre itens de HTMLCollection

Veja um exemplo prático do que foi explicado acima:

const myItems = document.getElementsByClassName("item");

for(let item of myItems) {
    console.log(item);
}

Note que primeiro selecionamos os elementos com uma respectiva classe, aqui no exemplo utilizei item, mas você deve mudar para a que te atende

Depois aplicamos o for … of, que é basicamente um for que tem como pegar item a item da lista

Nomeamos este item também de item, e conseguimos acessá-lo no corpo do for, simples não é? 🙂

Conclusão

Neste artigo você aprendeu a como fazer um loop em HTMLCollection de JavaScript

Primeiramente devemos selecionar os elementos por meio do DOM

E então aplicar a estrutura de repetição for … of

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!