Microsoft ブラウザの DOM コレクションに対して「オブジェクトはプロパティまたはメソッド「forEach」をサポートしていません」がスローされるのはなぜですか?

DOM コレクション用の Microsoft ブラウザーの forEach() に関する問題

開発者として、私たちはしばしば forEach() メソッドを使用してトラバースし、 DOM コレクションを操作します。ただし、Internet Explorer 11 および Edge では、「オブジェクトはプロパティまたはメソッド 'forEach' をサポートしていません」というイライラするエラーが発生することがあります。

DOM コレクションについて

Toこの問題を解決するには、querySelectorAll のような DOM メソッドがコレクション、つまり NodeList または HTMLCollection を返しますが、これらは本質的に forEach() をサポートしていないことを理解する必要があります。

• NodeList: のスナップショットを表します。
• HTMLCollection: NodeList に似ていますが、ライブであり、DOM 内の変更を反映します。

Polyfilling forEach ()

NodeList は forEach() を持つように指定されているため、安全にポリフィルできます。

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

反復性の確保

NodeList と HTMLCollection は反復可能ですが、古いブラウザではこれが実装されていない可能性があります。ポリフィルの反復性も同様に実現できます。

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

これらのポリフィルを配置すると、IE11 や Edge でも NodeList や HTMLCollection で forEach() を正常に使用できます。

使用例

<code class="js">var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    // Our custom logic here...
});</code>

追加の考慮事項

一部の従来の DOM ライブラリは、forEach() を HTMLCollection に追加することによって混乱する可能性があります。このような場合は、NodeList.

の forEach() のみをポリフィルします。

以上がMicrosoft ブラウザの DOM コレクションに対して「オブジェクトはプロパティまたはメソッド「forEach」をサポートしていません」がスローされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。