「forEach」が「HTMLCollection」で直接動作しないのはなぜですか?

Array.forEach による HTMLCollection の反復

このジレンマでは、開発者は document.getElementsByClassName("myclass").forEach を使用して DOM 要素を反復しようとします。 「.forEach はfunction."

HTMLCollection について

このエラーを解決する鍵は、getElementsByClassName によって返される結果の性質を理解することにあります。その名前に反して、配列ではなく HTMLCollection を生成します。 HTMLCollection は、NodeList と同様に、DOM4 仕様に従っており、微妙だが重要な点で従来の配列とは異なります。

HTMLCollection から Array への変換

強力な forEach メソッドを利用するには、まず、 HTMLCollection を配列に変換します。この変換を実行できるメソッドはいくつかあります。

Using Array.prototype.forEach.call:

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

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

Using [].forEach.call:

[].forEach.call(els, function (el) {...});

を使用するArray.from (ES6):

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

HTMLCollection を配列に変換すると、forEach を含む大量の配列メソッドを活用して、DOM 要素を効率的に処理および操作できます。

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