Question

这是我第二次遇到这个＆amp;这一次决定提出一个问题而不是寻找替代解决方案。

方案：我们有一个从document.getElementsByClassName获得的元素列表。返回的列表是一个数组。为什么我不能在这个返回的数组上使用像map, find, filter这样的内置数组函数？

<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 );
});

我在尝试＆amp;时收到错误：TypeError: list.map is not a function使用列表数组上的map函数。感谢。

Answer 1

这是因为getElementsByClassname返回一个HtmlCollection。这是一个有效的解决方案：

let list = document.getElementsByClassName("classy");
console.log(list);

Array.prototype.map.call(list, function(ele) {
  console.log("ele is", ele);
});

通过使用list作为参数从Array调用原型，您可以映射每个函数。另一种可能性是使用 [] 运算符来调用它：

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

在DOM Elements Array上调用内置函数

1 个答案: