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

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!