[解決済み] JS: Array.forEachを使用してgetElementsByClassNameの結果を反復処理する。

質問

いくつかのDOM要素に対して反復処理を行いたいのですが、このように行っています。

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

が、エラーになる。

document.getElementsByClassName("myclass").forEach is not a function.

私はFirefox 3を使用しているので、両方の getElementsByClassName と Array.forEach が存在します。これは問題なく動作します。

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

の結果ですか？ getElementsByClassName は配列ですか？そうでない場合、それは何ですか？

どのように解決するのですか？

いいえ。 DOM4 で指定された であれば、それは HTMLCollection (少なくともモダンブラウザでは。古いブラウザでは NodeList ).

すべてのモダンブラウザ（IE <= 8 以外はほぼすべて）で、Array の forEach メソッドに、要素のリスト( HTMLCollection または NodeList ) を this の値を指定します。

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

ES6を使用できる幸せな立場にある場合（つまり、Internet Explorerを安全に無視できるか、ES5トランスパイラを使用している場合）、以下のように使用することができます。 Array.from :

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