Wie behebe ich Array.forEach-Probleme mit HTMLCollections in Edge und Internet Explorer?

Array.forEach Problem mit HTMLCollections in Edge und Internet Explorer

Einführung:

DOM Sammlungseigenschaften und -methoden wie querySelectorAll geben Sammlungen zurück, insbesondere NodeLists (für querySelectorAll) oder HTMLCollections (für Methoden wie getElementsByTagName). Diese Sammlungen unterscheiden sich in ihrer Funktionalität von regulären Arrays.

Das Problem mit forEach:

NodeList und HTMLCollection unterstützen die forEach-Methode nicht nativ. Aus diesem Grund tritt in den Browsern Microsoft Edge und Internet Explorer die Fehlermeldung „Objekt unterstützt Eigenschaft oder Methode ‚forEach‘ nicht“ auf.

Lösungen:

1. Polyfill forEach für NodeList:

Damit forEach mit NodeList funktioniert, können Sie es wie folgt definieren:

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

2. Polyfill-Iterabilität für NodeList und HTMLCollection:

Da NodeList und HTMLCollection als iterierbar angegeben sind, können Sie diese polyfillen, indem Sie Folgendes verwenden:

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

Zusätzliche Hinweise:

• for-of: Durch die Polyfilling-Iterabilität können Sie die for-of-Schleifensyntax direkt für Sammlungen verwenden.
• Live-Sammlung: HTMLCollection ist eine Live-Sammlung, was bedeutet, dass Änderungen am DOM in der Sammlung widergespiegelt werden. NodeList ist nicht live.
• Kompatibilität: Die bereitgestellten Polyfills zielen auf Browser ohne native forEach-Unterstützung ab, z. B. IE11.

Das obige ist der detaillierte Inhalt vonWie behebe ich Array.forEach-Probleme mit HTMLCollections in Edge und Internet Explorer?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!