L’uso di forEach su un array da getElementsByClassName risulta in “TypeError: undefined non è una funzione”

Nel mio JSFiddle , sto semplicemente cercando di scorrere su una serie di elementi. L’array non è vuoto, come dimostrano le dichiarazioni del registro. Tuttavia, la chiamata a forEach mi dà l’ forEach (non così utile) “Uncaught TypeError : undefined is not a function”.

Devo fare qualcosa di stupido; Che cosa sto facendo di sbagliato?

Il mio codice:

 var arr = document.getElementsByClassName('myClass'); console.log(arr); console.log(arr[0]); arr.forEach(function(v, i, a) { console.log(v); }); 
 .myClass { background-color: #FF0000; } 
 
Hello

Questo perché document.getElementsByClassName restituisce un HTMLCollection , non un array.

Fortunatamente si tratta di un object “array” (che spiega perché è registrato come se fosse un object e perché è ansible iterare con un ciclo for standard), così puoi farlo:

 [].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) { 

Con ES6 (su browser moderni o con Babel), puoi utilizzare anche Array.from che crea array da oggetti di tipo array:

 Array.from(document.getElementsByClassName('myClass')).forEach(v=>{ 

o diffondere l’object tipo array in un array:

 [...document.getElementsByClassName('myClass'))].forEach(v=>{ 

Prova questo dovrebbe funzionare:

      
Hello
Hello

nel caso in cui si desideri accedere all’ID di ogni elemento di una class specifica, è ansible effettuare quanto segue:

  Array.from(document.getElementsByClassName('myClass')).forEach(function(element) { console.log(element.id); });