forEach on querySelectorAll verhält sich in Microsoft-Browsern nicht wie erwartet: Eine umfassende Untersuchung und Lösung

Internet Explorer und Edge-Browser stellen eine einzigartige Herausforderung für Entwickler dar, die forEach() verwenden Methode für das querySelectorAll-Ergebnis. Während die Methode in den meisten anderen Browsern gut unterstützt wird, stoßen IE und Edge aufgrund der verwendeten DOM-Methoden und Sammlungseigenschaften auf Schwierigkeiten.

Die NodeList- und HTMLCollection-Unterscheidungen

Im Gegensatz zu Array-ähnlichen NodeList-Instanzen , die eine statische Momentaufnahme übereinstimmender Elemente darstellen, sind HTMLCollection-Instanzen Live-Sammlungen, deren Änderungen in Echtzeit widergespiegelt werden. Die forEach()-Methode wurde erst kürzlich in NodeList implementiert, während HTMLCollection sie nicht unterstützt. Beide Sammlungen sind jedoch iterierbar, sodass sie in Arrays erweitert oder mithilfe der for-of-Schleife oder der Symbol.iterator-Eigenschaft iteriert werden können.

Polyfilling forEach() und Iterable Behavior

To Um das Fehlen von forEach() in NodeList zu beheben, kann eine einfache Polyfüllung implementiert werden:

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

Wenn einem Browser die Symbol.iterator-Eigenschaft für NodeList oder HTMLCollection fehlt, kann sie ebenfalls polygefüllt werden:

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

Fazit

Durch das Verständnis der Unterschiede zwischen NodeList und HTMLCollection und die Nutzung der Leistungsfähigkeit von Polyfills können Entwickler sicherstellen, dass die forEach()-Methode nahtlos in allen Browsern funktioniert, einschließlich Internet Explorer und Edge . Die bereitgestellten Codebeispiele ermöglichen Entwicklern die einfache Implementierung dieser Polyfills und die Wiederherstellung des erwarteten Verhaltens von forEach() in Microsoft-Browsern.