Warum verhält sich forEach in querySelectorAll in Microsoft-Browsern nicht wie erwartet?

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 Eigenschaft Symbol.iterator in 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 Rand. Die bereitgestellten Codebeispiele ermöglichen Entwicklern die einfache Implementierung dieser Polyfills und die Wiederherstellung des erwarteten Verhaltens von forEach() in Microsoft-Browsern.

Das obige ist der detaillierte Inhalt vonWarum verhält sich forEach in querySelectorAll in Microsoft-Browsern nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!