Warum funktioniert „forEach' nicht direkt auf „HTMLCollection'?

Iterieren über HTMLCollection mit Array.forEach

In diesem Dilemma versucht ein Entwickler, über DOM-Elemente zu iterieren, indem er nur document.getElementsByClassName("myclass").forEach verwendet Es wird eine Fehlermeldung angezeigt, die besagt: „.forEach ist keine Funktion.“

Verstehen HTMLCollection

Der Schlüssel zur Behebung dieses Fehlers liegt im Verständnis der Art des von getElementsByClassName zurückgegebenen Ergebnisses. Im Gegensatz zu seinem Namen erzeugt es kein Array, sondern eine HTMLCollection. HTMLCollection folgt, ähnlich wie NodeList, der DOM4-Spezifikation und unterscheidet sich in subtilen, aber bedeutenden Punkten von einem herkömmlichen Array.

HTMLCollection in Array konvertieren

Um die leistungsstarke forEach-Methode nutzen zu können, muss zunächst das transformiert werden HTMLCollection in ein Array. Mehrere Methoden können diese Konvertierung durchführen:

Verwenden von Array.prototype.forEach.call:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
  // Do stuff here
  console.log(el.tagName);
});

Verwenden von [].forEach.call:

[].forEach.call(els, function (el) {...});

Verwenden von Array.from (ES6):

Array.from(els).forEach((el) => {
  // Do stuff here
  console.log(el.tagName);
});

Durch die Konvertierung der HTMLCollection in ein Array kann man die Fülle an Array-Methoden, einschließlich forEach, nutzen, um die DOM-Elemente effizient zu verarbeiten und zu manipulieren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „forEach' nicht direkt auf „HTMLCollection'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!