Question

在my JSFiddle中，我只是试图迭代一系列元素。正如日志语句所证明的那样，该数组是非空的。然而，对forEach的调用给了我（不太有用）“未捕获TypeError：undefined不是函数”错误。

我必须做一些愚蠢的事;我做错了什么？

我的代码：

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});

.myClass {
  background-color: #FF0000;
}

<div class="myClass">Hello</div>

Answer 1

那是因为document.getElementsByClassName会返回HTMLCollection，而不是数组。

幸运的是它是"array-like" object（这解释了为什么它被记录为好像它是一个对象以及为什么你可以使用标准for循环进行迭代），所以你可以这样做：

[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {

使用ES6（在现代浏览器上或使用Babel），您还可以使用Array.from从类似数组的对象构建数组：

Array.from(document.getElementsByClassName('myClass')).forEach(v=>{

或将类似数组的对象传播到数组中：

[...document.getElementsByClassName('myClass'))].forEach(v=>{

Answer 2

试试这个应该有效：

<html>
  <head>
    <style type="text/css">
    </style>
  </head>
  <body>
   <div class="myClass">Hello</div>
   <div class="myClass">Hello</div>

<script type="text/javascript">
    var arr = document.getElementsByClassName('myClass');
    console.log(arr);
    console.log(arr[0]);
    arr = [].slice.call(arr); //I have converted the HTML Collection an array
    arr.forEach(function(v,i,a) {
        console.log(v);
    });
</script>


<style type="text/css">
    .myClass {
    background-color: #FF0000;
}
</style>

  </body>
</html>

Answer 3

如果您想要访问特定类的每个元素的ID，您可以执行以下操作：

    Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
        console.log(element.id);
    });

在getElementsByClassName的数组上使用forEach会导致“TypeError：undefined不是函数”

3 个答案: