Microsoft ブラウザで querySelectorAll の forEach が期待どおりに動作しないのはなぜですか?

querySelectorAll の forEach が Microsoft ブラウザーで期待どおりに動作しない: 包括的な調査と解決策

Internet Explorer および Edge ブラウザーは、forEach() を利用する開発者に特有の課題を提示します。 querySelectorAll 結果のメソッド。このメソッドは他のほとんどのブラウザで十分にサポートされていますが、IE と Edge では、採用されている DOM メソッドとコレクション プロパティにより問題が発生します。

NodeList と HTMLCollection の違い

配列のような NodeList インスタンスとは異なります。 、一致する要素の静的スナップショットを表す HTMLCollection インスタンスは、変更がリアルタイムで反映されるライブ コレクションです。 forEach() メソッドは最近 NodeList に実装されたばかりですが、HTMLCollection ではサポートされていません。ただし、両方のコレクションは反復可能であり、for-of ループまたは Symbol.iterator プロパティを使用して配列に展開したり、反復したりできます。

forEach() と反復可能な動作

To NodeList に forEach() がない場合は、単純なポリフィルを実装できます:

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

同様に、ブラウザに NodeList または HTMLCollection の Symbol.iterator プロパティがない場合は、ポリフィルすることもできます:

if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}

結論

NodeList と HTMLCollection の違いを理解し、ポリフィルの力を活用することで、開発者は forEach() メソッドが Internet Explorer や HTMLCollection を含むすべてのブラウザでシームレスに動作することを保証できます。角。提供されているコード サンプルを使用すると、開発者はこれらのポリフィルを簡単に実装し、Microsoft ブラウザで forEach() の予想される動作を復元できます。

以上がMicrosoft ブラウザで querySelectorAll の forEach が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。