forEach sur querySelectorAll ne se comporte pas comme prévu dans les navigateurs Microsoft : un examen et une solution complets

Les navigateurs Internet Explorer et Edge présentent un défi unique pour les développeurs utilisant forEach() méthode sur le résultat querySelectorAll. Bien que la méthode soit bien prise en charge dans la plupart des autres navigateurs, IE et Edge rencontrent des difficultés en raison des méthodes DOM et des propriétés de collection utilisées.

Les distinctions NodeList et HTMLCollection

Contrairement aux instances NodeList de type tableau , qui représentent un instantané statique des éléments correspondants, les instances HTMLCollection sont des collections dynamiques dont les modifications sont reflétées en temps réel. La méthode forEach() n'a été implémentée que récemment dans NodeList, alors que HTMLCollection ne la prend pas en charge. Cependant, les deux collections sont itérables, ce qui leur permet d'être développées en tableaux ou itérées à l'aide de la boucle for-of ou de la propriété Symbol.iterator.

Polyfilling forEach() et Iterable Behavior

To pour remédier à l'absence de forEach() dans NodeList, un simple polyfill peut être implémenté :

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

De même, si un navigateur ne dispose pas de la propriété Symbol.iterator sur NodeList ou HTMLCollection, elle peut également être polyremplie :

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

Conclusion

En comprenant les différences entre NodeList et HTMLCollection et en tirant parti de la puissance des polyfills, les développeurs peuvent garantir que la méthode forEach() fonctionne de manière transparente sur tous les navigateurs, y compris Internet Explorer et Edge. . Les exemples de code fournis permettent aux développeurs d'implémenter facilement ces polyfills et de restaurer le comportement attendu de forEach() dans les navigateurs Microsoft.