Warum wird „Objekt unterstützt Eigenschaft oder Methode „forEach' nicht' für DOM-Sammlungen in Microsoft-Browsern ausgelöst?

Probleme mit forEach() in Microsoft-Browsern für DOM-Sammlungen

Als Entwickler verlassen wir uns oft auf die Methode forEach(), um und zu durchlaufen Manipulieren Sie DOM-Sammlungen. Es kann jedoch sein, dass wir in Internet Explorer 11 und Edge auf den frustrierenden Fehler „Objekt unterstützt Eigenschaft oder Methode ‚forEach‘ nicht“ stoßen.

Grundlegendes zu DOM-Sammlungen

An Um dieses Problem zu lösen, müssen wir verstehen, dass DOM-Methoden wie querySelectorAll Sammlungen zurückgeben, nämlich NodeList oder HTMLCollection, die forEach() nicht von Natur aus unterstützen.

• NodeList: Stellt eine Momentaufnahme von dar passende Elemente, spiegelt DOM-Änderungen nicht automatisch wider.
• HTMLCollection: Ähnlich wie NodeList, aber live, spiegelt Änderungen im DOM wider.

Polyfilling forEach ()

Da NodeList mit forEach() spezifiziert ist, können wir es sicher polyfillen:

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

Iterabilität sicherstellen

NodeList und HTMLCollection sind iterierbar, ältere Browser implementieren dies jedoch möglicherweise nicht. Wir können auch die Iterabilität polyfillen:

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

Mit diesen Polyfills können wir forEach() erfolgreich auf NodeList und HTMLCollection verwenden, sogar in IE11 und Edge.

Beispielverwendung

<code class="js">var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    // Our custom logic here...
});</code>

Zusätzliche Überlegungen

Einige ältere DOM-Bibliotheken können durch das Hinzufügen von forEach() zu HTMLCollection verwirrt werden. In solchen Fällen nur Polyfill forEach() auf NodeList.

Das obige ist der detaillierte Inhalt vonWarum wird „Objekt unterstützt Eigenschaft oder Methode „forEach' nicht' für DOM-Sammlungen in Microsoft-Browsern ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!