Pourquoi \"L'objet ne prend pas en charge la propriété ou la méthode \'forEach\'\" est-il lancé pour les collections DOM dans les navigateurs Microsoft ?

Problèmes avec forEach() dans les navigateurs Microsoft pour les collections DOM

En tant que développeurs, nous nous appuyons souvent sur la méthode forEach() pour parcourir et manipuler les collections DOM. Cependant, nous pouvons rencontrer l'erreur frustrante « L'objet ne prend pas en charge la propriété ou la méthode 'forEach' » dans Internet Explorer 11 et Edge.

Comprendre les collections DOM

Pour pour résoudre ce problème, nous devons comprendre que les méthodes DOM comme querySelectorAll renvoient des collections, à savoir NodeList ou HTMLCollection, qui ne prennent pas intrinsèquement en charge forEach().

• NodeList : Représente un instantané de éléments correspondants, ne reflète pas automatiquement les modifications du DOM.
• HTMLCollection :Semblable à NodeList mais en direct, reflétant les modifications dans le DOM.

Polyfilling forEach ()

Puisque NodeList est spécifié pour avoir forEach(), nous pouvons le polyfill en toute sécurité :

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

Assurer l'itérabilité

NodeList et HTMLCollection sont itérables, mais les anciens navigateurs peuvent ne pas l'implémenter. Nous pouvons également polyfiller l'itérabilité :

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

Avec ces polyfills en place, nous pouvons utiliser avec succès forEach() sur NodeList et HTMLCollection même dans IE11 et Edge.

Exemple d'utilisation

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

Considérations supplémentaires

Certaines bibliothèques DOM héritées peuvent être confondues en ajoutant forEach() à HTMLCollection. Dans de tels cas, polyfill forEach() uniquement sur NodeList.

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!