最近の Microsoft ブラウザでは forEach() が querySelectorAll で機能しないのはなぜですか?

querySelectorAll の forEach が最近の Microsoft ブラウザーで動作しない

forEach() メソッドは、広くサポートされているにもかかわらず、最近のバージョンのインターネットで querySelectorAll とともに使用するといくつかの問題が発生しますExplorer (11) と Edge。

問題の理解

一致する DOM 要素を表すコレクションである NodeList と HTMLCollection には、古い Microsoft ブラウザーにはネイティブで forEach() メソッドがありません。ただし、これらのコレクションは反復可能であり、for-of などの代替メソッドを使用してループすることができます。

問題の解決

forEach()

forEach() メソッドをネイティブにサポートしていないブラウザでは、NodeList および HTMLCollection に手動で forEach() メソッドを追加できます。これはシンプルで効果的な解決策です:

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

ポリフィルの反復性

ブラウザに ES2015 機能があるものの、まだ NodeList の反復性が欠けている場合は、それをポリフィルすることもできます。

<code class="javascript">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>

結論

forEach() と反復性をポリフィルすることで、古い Microsoft ブラウザーの制限を克服し、NodeList コレクションと HTMLCollection コレクションを操作するときにコードの一貫した動作を保証できます。

以上が最近の Microsoft ブラウザでは forEach() が querySelectorAll で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。