「getElementsByClassName」が「forEach」と直接連携しないのはなぜですか?

Array.forEach メソッド: getElementsByClassName

getElementsByClassName メソッドを使用して DOM 要素を反復しようとすると、開発者は次のような問題に遭遇する可能性があります。特有のエラー: 「document.getElementsByClassName('myclass').forEach は関数ではありません。」 Firefox 3 には getElementsByClassName と Array.forEach の両方が存在するにもかかわらず、エラーが継続します。

getElementsByClassName の結果が配列ではないため、混乱が生じます。最新のブラウザでは、これは HTMLCollection であり、HTML 要素に特化したコレクションです。これは配列のようなプロパティを持っていますが、真の配列ではありません。

問題を解決し、要素を正常に反復処理するために、開発者はトリックを使用できます。つまり、Array の forEach メソッドを呼び出して、HTMLCollection をこの値:

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

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

この手法により、反復を期待どおりに進めることができます。あるいは、開発者は ES6 環境で利用可能な Array.from を使用して、反復処理の前に HTMLCollection を Array に変換することもできます。

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

これらの手法を利用することで、開発者は getElementsByClassName 経由で取得した DOM 要素を効果的に反復処理でき、 Array.forEach メソッドとの互換性。

以上が「getElementsByClassName」が「forEach」と直接連携しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。