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

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

NodeList と HTMLCollection の区別

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

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

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

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

結論

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
    });
}