Iterace přes výsledek getElementsByClassName pomocí Array.forEach

Chci iterovat některé prvky DOM, dělám toto:

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

ale dostávám chybu:

document.getElementsByClassName(“myclass”).forEach není funkce

Používám Firefox 3, takže vím, že obě getElementsByClassName a Array.forEach jsou přítomny. Funguje to dobře:

[2, 5, 9].forEach( function(element, index, array) {
  //do stuff
});

Je výsledkem getElementsByClassName pole? Pokud ne, co to je?

Odpověď

Ne, není to pole. Jak je uvedeno v DOM4, je to HTMLCollection (alespoň v moderních prohlížečích. Starší prohlížeče vracely NodeList ).

Ve všech moderních prohlížečích (v podstatě v čemkoli jiném IE <=8) můžete zavolat Array's forEach metoda a předá jí seznam prvků (ať už je to HTMLCollection nebo NodeList ) jako this hodnota:

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) {...});

Pokud jste spokojeni s tím, že můžete používat ES6 (tj. můžete bezpečně ignorovat Internet Explorer nebo používáte transpiler ES5), můžete použít Array.from :

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