Javascript .map() ist keine Funktion

Question

Ich bin neu hier (und neu in JavaScript), also bitte entschuldigen Sie meine super grundlegenden Fragen. Ich habe eine HTML-Seite mit verschiedenen Bildern, die alle eine Klasse teilen. Mit getElementsByClassName erhalte ich ein Array. Ich möchte jeder Zelle in dem Array einen Ereignis-Listener hinzufügen, indem Sie die Map() - Funktion verwenden.

Das ist, was ich habe:

window.onload = function(){ 
var allImgs = document.getElementsByClassName("pft"); 

var newImgs = allImgs.map(
     function(arrayCell){ 
      return arrayCell.addEventListener("mouseover, functionName"); 
     } 
    ); 
}; 

Dies hält den Fehler zeigt „allImgs.map ist keine Funktion“, auch wenn ich die innere Funktion, um etwas zu ändern, die nicht den Ereignis-Listener nicht enthält.

Ich habe eine andere Version dieses Codes, wo ich nur die Array-Zellen innerhalb von window.onload durchlaufen und den Ereignis-Listener zu jedem von ihnen auf diese Weise hinzufügen und es funktioniert. Warum funktioniert die .map() - Funktion nicht? Kann es nicht in window.onload verwendet werden?

Answer 1

getElementsByClassName() gibt ein HTMLCollection keine Array. Man muss es in ein Array zuerst JavaScript konvertieren:

allImgs = Array.prototype.slice.call(allImgs); 
// or 
allImgs = [].slice.call(allImgs); 
// or 
allImgs = Array.from(allImgs); 

Answer 2

Mit getElementsByClassName erhalte ich ein Array.

Nein, tun Sie nicht.

Sie erhalten eine Live HTMLCollection. Dies ist Array-ähnlich, ist aber kein Array.

Da es ausreichend Array-ähnlich ist, können Sie die map Methode aus einem echten Array anwenden.

var text_content = [].map.call(
 
     document.getElementsByClassName("sdf"), 
 
     function (currentValue, index, collection) { 
 
     return currentValue.innerHTML; 
 
     } 
 
    ); 
 
    console.log(text_content);

<p class="sdf">foo</p> 
 
    <p class="sdf"></p> 
 
    <p class="sdf">bar</p> 
 
    <p class="sdf"></p> 
 
    <p class="sdf"></p> 
 
     

Answer 3

Eine andere Möglichkeit wäre map direkt zu verwenden:

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

jedoch, was Sie tun, ist besser mit Array.prototype.forEach erreicht.