Javascript .map()不是一个函数

Question

我是新手(也是JavaScript新手),请原谅我的超级基本问题.我有一个包含不同图像的HTML页面,它们共享一个类.通过使用getElementsByClassName,我得到一个数组.我想使用.map()函数为数组中的每个单元格添加一个事件监听器.

这就是我所拥有的:

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

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

即使我将内部函数更改为不包含事件侦听器的内容,这仍然显示错误"allImgs.map不是函数".

我有这个代码的另一个版本,我只是遍历window.onload中的数组单元格,并以这种方式将事件监听器添加到它们中,并且它可以工作.为什么.map()函数不起作用？它可以不用于window.onload吗？

Answer 1

getElementsByClassName()返回HTMLCollection不是Array.您必须先将其转换为JavaScript数组:

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

Answer 2

另一种选择是map直接使用：

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

但是，使用Array.prototype.forEach.

Answer 3

通过使用getElementsByClassName，我得到一个数组。

不，你没有。

您将获得一个实时HTMLCollection。这类似于数组，但不是数组。

由于它足够类似于数组，因此可以map从实际数组中应用该方法。

    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>