forEach on querySelectorAll no se comporta como se esperaba en los navegadores de Microsoft: un examen y una solución integrales

Los navegadores Internet Explorer y Edge presentan un desafío único para los desarrolladores que utilizan forEach() método en el resultado querySelectorAll. Si bien el método es compatible con la mayoría de los demás navegadores, IE y Edge encuentran dificultades debido a los métodos DOM y las propiedades de colección empleadas.

Las distinciones NodeList y HTMLCollection

A diferencia de las instancias NodeList tipo matriz , que representan una instantánea estática de elementos coincidentes, las instancias de HTMLCollection son colecciones en vivo cuyos cambios se reflejan en tiempo real. El método forEach() se implementó recientemente en NodeList, mientras que HTMLCollection no lo admite. Sin embargo, ambas colecciones son iterables, lo que permite expandirlas en matrices o iterarlas utilizando el bucle for-of o la propiedad Symbol.iterator.

Polyfilling forEach() and Iterable Behavior

To abordar la ausencia de forEach() en NodeList, se puede implementar un polyfill simple:

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

De manera similar, si un navegador carece de la propiedad Symbol.iterator en NodeList o HTMLCollection, también se puede rellenar con múltiples opciones:

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
    });
}

Conclusión

Al comprender las diferencias entre NodeList y HTMLCollection y aprovechar el poder de los polyfills, los desarrolladores pueden garantizar que el método forEach() funcione sin problemas en todos los navegadores, incluidos Internet Explorer y Edge. . Los ejemplos de código proporcionados permiten a los desarrolladores implementar fácilmente estos polyfills y restaurar el comportamiento esperado de forEach() en los navegadores de Microsoft.