Warum gibt „getElementsByClassName' in JavaScript kein Array zurück?

getElementsByClassName gibt eine HTMLCollection zurück, kein Array

In JavaScript gibt die Methode document.getElementsByClassName eine Sammlung von DOM-Elementen zurück, die mit den angegebenen übereinstimmen Klassenname. Diese Sammlung ist jedoch kein Array, sondern eine HTMLCollection.

In modernen Browsern (Firefox 3 und höher) kann die Array.forEach-Methode mit einer HTMLCollection verwendet werden, indem dies festgelegt wird Wert der forEach-Funktion zur HTMLCollection hinzufügen. So geht's:

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

Array.prototype.forEach.call(els, function(el) {
  // Do something with the element
});

// Or, in ES6+
[].forEach.call(els, (el) => {
  // Do something with the element
});

Ein modernerer Ansatz mit ES6 besteht darin, Array.from zu verwenden, um die HTMLCollection in ein tatsächliches Array umzuwandeln:

Array.from(els).forEach((el) => {
  // Do something with the element
});

Durch Festlegen des this-Werts oder mit Array.from können Sie mit der forEach-Methode über die HTMLCollection iterieren, als wäre sie ein Array. Beachten Sie, dass ältere Browser wie Internet Explorer 8 und niedriger diesen Ansatz nicht unterstützen und eine NodeList anstelle einer HTMLCollection zurückgeben.

Das obige ist der detaillierte Inhalt vonWarum gibt „getElementsByClassName' in JavaScript kein Array zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!