Edge および Internet Explorer の HTMLCollections に関する Array.forEach の問題を修正する方法

Edge および Internet Explorer の HTMLCollection に関する Array.forEach の問題

概要:

DOM querySelectorAll などのコレクションのプロパティおよびメソッドは、コレクション、特に NodeList (querySelectorAll の場合) または HTMLCollections (getElementsByTagName などのメソッドの場合) を返します。これらのコレクションは、その機能において通常の配列とは異なります。

forEach の問題:

NodeList と HTMLCollection は、forEach メソッドをネイティブにサポートしません。これが、Microsoft の Edge ブラウザーおよび Internet Explorer ブラウザーで「オブジェクトはプロパティまたはメソッド 'forEach' をサポートしていません」というエラーが発生する理由です。

解決策:

1. NodeList の forEach をポリフィルします:

forEach を NodeList で機能させるには、次のように定義できます:

<code class="js">if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}</code>

2。 NodeList と HTMLCollection のポリフィルの反復性:

NodeList と HTMLCollection は反復可能に指定されているため、次を使用してポリフィルできます:

<code class="js">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
    });
}</code>

補足:

• for-of: ポリフィルの反復性により、for-of ループ構文をコレクションに直接使用できます。
• ライブ コレクション: HTMLCollection はライブ コレクションです。つまり、DOM への変更がコレクションに反映されます。 NodeList はライブではありません。
• 互換性: 提供されているポリフィルは、IE11 などのネイティブ forEach サポートのないブラウザをターゲットとしています。

以上がEdge および Internet Explorer の HTMLCollections に関する Array.forEach の問題を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。