1

Por que quando uso for in para aplicar uma regra a todos os elementos de uma classe html através do javascript até funciona mas sempre aparece este erro no console?

TypeError: document.getElementsByClassName(...)[i].style is undefined

var e = document.getElementsByClassName("minha-classe");

for (var i in e) {
  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>

0

1 Resposta 1

2

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>

1
  • Obrigado pela resposta, ajudou bastante. Fazia um tempo que eu tava tentando entender porque isso acontecia.
    – user83428
    11/07/2017 às 23:05

Você deve fazer log-in para responder a esta pergunta.