Integrierte Funktionen auf DOM-Elementen aufrufen Array

Question

Dies ist das zweite Mal, dass ich diese & dieses Mal getroffen habe entschieden, eine Frage zu stellen, anstatt eine alternative Lösung zu finden.

Szenario: Wir haben eine Liste von Elementen, die wir von document.getElementsByClassName erhalten. Die zurückgegebene Liste ist ein Array. Warum kann ich die integrierten Array-Funktionen wie map, find, filter nicht für dieses zurückgegebene Array verwenden?

https://jsfiddle.net/xbka5pt2/

<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 

Javascript:

let list = document.getElementsByClassName("classy"); 
console.log(list); 
// the following returns a 'typeError': 
// "list.map is not a function" 
list.map(function(ele){ 
    console.log("ele is", ele); 
}); 

erhalte ich die Fehlermeldung: TypeError: list.map is not a function, wenn ich versuche & die Kartenfunktion auf der Liste Array. Vielen Dank.

Answer 1

Dies liegt daran, dass getElementsByClassname eine HtmlCollection zurückgibt. Hier ist eine funktionierende Lösung:

Durch den Aufruf des Prototyps aus Array mit der Liste als Parameter können Sie jede Funktion zuordnen. Eine andere Möglichkeit wäre es zu nennen mit dem [] Operator wie folgt aus:

[].map.call(list, function (el) {...});