Pourquoi forEach() ne fonctionne-t-il pas sur querySelectorAll dans les navigateurs Microsoft récents ?

forEach sur querySelectorAll ne fonctionne pas dans les navigateurs Microsoft récents

La méthode forEach(), malgré son support généralisé, rencontre certains problèmes lorsqu'elle est utilisée avec querySelectorAll dans les versions récentes d'Internet Explorer (11) et Edge.

Comprendre le problème

NodeList et HTMLCollection, qui sont des collections représentant des éléments DOM correspondants, ne disposent pas de la méthode forEach() de manière native dans les anciens navigateurs Microsoft. Ces collections, cependant, sont itérables, ce qui permet de les parcourir en boucle à l'aide de méthodes alternatives telles que for-of.

Résoudre le problème

Polyfilling forEach()

Vous pouvez ajouter manuellement la méthode forEach() à NodeList et HTMLCollection dans les navigateurs qui ne la prennent pas en charge nativement. Il s'agit d'une solution simple et efficace :

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

Itérabilité du polyfilling

Si un navigateur possède des fonctionnalités ES2015 mais ne dispose toujours pas de l'itérabilité NodeList, vous pouvez également le polyfill :

<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>

Conclusion

En polyfilling forEach() et itérabilité, vous pouvez surmonter les limitations des anciens navigateurs Microsoft et garantir un comportement cohérent de votre code lorsque vous travaillez avec les collections NodeList et HTMLCollection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!