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!