O retorno de getElementsByClassName
é um objeto do tipo HTMLCollection
, não apenas um objeto NodeList
. Este objeto possui um atributo de somente leitura chamado length
e métodos chamados item
e namedItem
que são incluídos nas iterações quando utilizado o for
. Para verificar, basta exibir o valor de i
:
var e = document.getElementsByClassName("minha-classe");
for (let i in e) {
console.log(i);
}
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
O erro é gerado quando o valor length
é atribuído à variável i
, pois o código tenta definir o estilo de um elemento e[length]
, mas este não é um elemento HTML. Para contornar o problema, basta alterar a estrutura de repetição:
var e = document.getElementsByClassName("minha-classe");
for (let i = 0; i < e.length; i++) {
e[i].style.display = "none";
}
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
Assim você garante que os valores de i
serão sempre válidos e percorrerá todos os elementos da lista.
Utilizando o for ... of
Utilizando ES6 é possível utilizar o for ... of
ao invés de for ... in
. Veja o exemplo abaixo:
var e = document.getElementsByClassName("minha-classe");
for (let i of e) {
i.style.display = "none";
}
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>
<div class="minha-classe">...</div>