☰

Array.forEach を使用して getElementsByClassName の結果を反復処理する 質問する

tag-icon • tag-icon javascript foreach getelementsbyclassname
Array.forEach を使用して getElementsByClassName の結果を反復処理する 質問する

いくつかの DOM 要素を反復処理したいので、次のようにします。

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

しかし、エラーが発生します:

document.getElementsByClassName("myclass").forEach は関数ではありません

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

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

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

ベストアンサー1

いいえ、配列ではありません。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);
});

おすすめ記事