Comment résoudre les problèmes Array.forEach avec HTMLCollections dans Edge et Internet Explorer ?

Array.forEach Problème avec HTMLCollections dans Edge et Internet Explorer

Introduction :

DOM Les propriétés et méthodes de collection, telles que querySelectorAll, renvoient des collections, en particulier NodeLists (pour querySelectorAll) ou HTMLCollections (pour des méthodes comme getElementsByTagName). Ces collections diffèrent des tableaux classiques par leurs fonctionnalités.

Le problème avec forEach :

NodeList et HTMLCollection ne prennent pas en charge nativement la méthode forEach. C'est pourquoi vous rencontrez l'erreur « L'objet ne prend pas en charge la propriété ou la méthode 'forEach' » dans les navigateurs Microsoft Edge et Internet Explorer.

Solutions :

1. Polyfill forEach pour NodeList :

Pour que forEach fonctionne avec NodeList, vous pouvez le définir comme :

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

2. Itérabilité du polyfill pour NodeList et HTMLCollection :

Comme NodeList et HTMLCollection sont spécifiés pour être itérables, vous pouvez le polyfill en utilisant :

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

Remarques supplémentaires :

• for-of : l'itérabilité du polyfilling vous permet d'utiliser la syntaxe de boucle for-of directement sur les collections.
• Live Collection : HTMLCollection est une collection dynamique, ce qui signifie que les modifications apportées au DOM sont reflétées dans la collection. NodeList n'est pas en ligne.
• Compatibilité : Les polyfills fournis ciblent les navigateurs sans support natif de forEach, tels que IE11.

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!