【JavaScript】 getElementsByClassNameでforEachがエラーな理由と対処方法

JavaScriptでDOM操作をおこなっているとgetElementsByClassNameメソッドで取得した要素をforEachで処理したいときがあります。
しかし実際にコードを作成して実行するとエラーになってしまいます。

ここではその理由と、対処方法についてお伝えします。

getElementsByClassNameで取得した配列をforEachで処理してみる。

const elements = document.getElementsByClassName( "classname" );

elements.forEach( e=>console.log( e ) );

Uncaught TypeError: elements.forEach is not a function

というエラーが出てしまった。

DOMのgetElementsByClassNameメソッドは、HTMLCollectionというオブジェクトを返します。

このオブジェクトは配列、つまりArrayオブジェクトと混同されることが多いですが、実際はアレイライクなオブジェクトに分類されます。

forEachメソッドを実行するには、オブジェクトにforEachメソッドが定義（実装）されている必要があります。

HTMLCollectionには定義されいないため、先ほどのコードはエラーになってしまったのです。

対処法いくつか挙げてみます。

1:一番素直（おススメ）な対処法

const elements = document.getElementsByClassName( "classname" );

for( let i = 0 ; i < elements.length ; i ++ ) {
    console.log( elements[i] );
}

JavaScriptの中級者レベルになると、forループかっこ悪いと感じる人が出てきますが、効率的なこれが一番です。

2:Array.fromを使った対処法

例として挙げられていることが多いけれど、ムダに感じるコードです。

const elements = document.getElementsByClassName( "classname" );

const elementsArray = Array.from( elements ) ;

elementsArray.forEach( e=>console.log( e ) );

Array.fromは、アレイライクなオブジェクトをArrayオブジェクトに変換することも可能なメソッドです。

Arrayオブジェクトに変換後は、forEachメソッドが使用できます。

しかし、forEachメソッドを使用したいという理由だけで、Array.fromを実行するのはムダですね。

3:Array.prototype.forEachを使った対処法

次は僕の中では無理やり感満載なコードです。

const elements = document.getElementsByClassName( "aaa" );

Array.prototype.forEach.call( elements , e => console.log( e ) );

ArrayオブジェクトのforEachメソッドの実体は、Array.prototype.forEachです。

この実体に対して、this値を変更するcallメソッドを実行しています。

これにより、HTMLCollectionを配列に見立てて処理できます。

ただしこれは、Array.prototype.forEachがアレイライクなオブジェクトでも動作するように設計されているからこそ可能な方法です。

おそらくないと思いますが、今後のバージョンアップでArrayオブジェクトのみを受け付けるようになったら、動作しなくなります。

この意味からすると、「今はこんな方法もありますよ」というとても消極的な例示にとどめておくべきかもしれません。

4:なにがなんでもgetElementsByClassNameでforEachしたい

getElementsByClassNameで取得した値にそのままforEachしたいときは、次のようにHTMLCollectionにforEachメソッドを組み込みます。

HTMLCollection.prototype.forEach = function ( callbackfn  , thisArg = undefined ){
    for( let i = 0 ; i < this.length ; i ++ )
        callbackfn.call( thisArg , this[i] , i , this )
};

const elements = document.getElementsByClassName( "aaa" );
elements.forEach ( e=>console.log( e ) );

forEachで定義している関数は、引数などのチェックをおこなっていません。
いろいろ面倒なので、次のようにArray.prototype.forEachをセットしてしまうのでもいいかもしれません。

HTMLCollection.prototype.forEach = Array.prototype.forEach;

APIも含めて組み込みオブジェクトにプログラムコードでプロパティを追加するのは推奨されていないので、僕としてはおススメしません。

ただ、このような方法もあるという知識は持っている方がいいので、紹介しています。