JS: iterando sobre el resultado de getElementsByClassName usando Array.forEach

Solución:

No. Como se especifica en DOM4, es un HTMLCollection (en los navegadores modernos, al menos. Los navegadores más antiguos devolvieron un NodeList).

En todos los navegadores modernos (prácticamente cualquier otro IE <= 8), puede llamar a Array forEach método, pasándole la lista de elementos (ya sea HTMLCollection o NodeList) como el this valor:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

Si está en la feliz posición de poder usar ES6 (es decir, puede ignorar Internet Explorer de manera segura o si está usando un transpilador ES5), puede usar Array.from:

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});

Puedes usar Array.from para convertir una colección en una matriz, que es mucho más limpia que Array.prototype.forEach.call:

Array.from(document.getElementsByClassName("myclass")).forEach(
    function(element, index, array) {
        // do stuff
    }
);

En navegadores antiguos que no son compatibles Array.from, necesitas usar algo como Babel.

---

ES6 también agrega esta sintaxis:

[...document.getElementsByClassName("myclass")].forEach(
    (element, index, array) => {
        // do stuff
    }
);

Descanse desestructurando con ... funciona en todos los objetos similares a matrices, no solo en las matrices en sí mismas, luego se usa una buena sintaxis de matriz antigua para construir una matriz a partir de los valores.

---

Mientras que la función alternativa querySelectorAll (lo que hace un poco getElementsByClassName obsoleto) devuelve una colección que tiene forEach de forma nativa, otros métodos como map o filter faltan, por lo que esta sintaxis sigue siendo útil:

[...document.querySelectorAll(".myclass")].map(
    (element, index, array) => {
        // do stuff
    }
);

[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);

O puedes usar querySelectorAll que devuelve NodeList:

document.querySelectorAll('.myclass').forEach(...)

Compatible con navegadores modernos (incluido Edge, pero no IE):
¿Puedo usar querySelectorAll?
NodeList.prototype.forEach ()

MDN: Document.querySelectorAll ()

---

---

Utiliza Nuestro Buscador