Javascript 在getElementsByClassName中的数组上使用forEach会导致“；TypeError:undefined不是函数”；_Javascript_Foreach

Javascript 在getElementsByClassName中的数组上使用forEach会导致“；TypeError:undefined不是函数”；

javascript

Javascript 在getElementsByClassName中的数组上使用forEach会导致“；TypeError:undefined不是函数”；,javascript,foreach,Javascript,Foreach,在中，我只是尝试迭代元素数组。正如日志语句所证明的那样，数组是非空的。然而，调用forEach给了我一个（没有那么大帮助的）“UncaughtTypeError：undefined不是函数”错误我一定在做傻事；我做错了什么我的代码： var arr=document.getElementsByClassName（'myClass'）；控制台日志（arr）； console.log（arr[0]）； arr.forEach（函数（v，i，a）{ 控制台日志（v）； }); .myClass

在中，我只是尝试迭代元素数组。正如日志语句所证明的那样，数组是非空的。然而，调用

forEach

给了我一个（没有那么大帮助的）“Uncaught

TypeError

：

undefined

不是函数”错误

我一定在做傻事；我做错了什么

我的代码：

var arr=document.getElementsByClassName（'myClass'）；
控制台日志（arr）；
console.log（arr[0]）；
arr.forEach（函数（v，i，a）{
控制台日志（v）；
});
.myClass{
背景色：#FF0000；
}
Hello
这是因为document.getElementsByClassName
返回一个数组，而不是一个数组
幸运的是，它是一个循环（这解释了为什么它被记录为一个对象，以及为什么您可以使用标准的for
循环进行迭代），所以您可以这样做：
[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {

对于ES6（在现代浏览器或Babel上），您还可以使用以下方法从类似数组的对象构建数组：
Array.from(document.getElementsByClassName('myClass')).forEach(v=>{

或将类似阵列的对象展开为一个阵列：
[...document.getElementsByClassName('myClass'))].forEach(v=>{

试试这个，它应该可以工作：
<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>


你好
你好
var arr=document.getElementsByClassName（'myClass'）；
控制台日志（arr）；
console.log（arr[0]）；
arr=[].slice.call（arr）//我已将HTML集合转换为数组
arr.forEach（函数（v，i，a）{
控制台日志（v）；
});
.myClass{
背景色：#FF0000；
}
如果要访问特定类的每个元素的ID，可以执行以下操作：
    Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
        console.log(element.id);
    });

arr
不是数组，而是HTMLCollection
。它没有与数组相同的方法。这里有一篇关于它的帖子：类似于[1,2,3].forEach（函数（v，i，a）{console.log（v）；}）很好。这和我的例子中的数组有什么区别？你的例子中没有数组。是什么让你认为它是一个数组？@Jer:Asarr instanceof array
将导致false
它无法利用数组
对象的任何原型方法，例如arr
是一个类数组的对象（但不继承或实例化array
）。因此，您的标准for
循环将起作用，因为它只是通过对象的索引进行迭代，而不是数组的原型。您应该研究内置对象和宿主对象之间的差异。前者符合ECMA-262的要求，后者仅符合主人的意愿。DOM有许多对象允许通过索引（document.images、document.forms、form.elements、select.options等）访问成员，这些对象主要基于@Jer参数。jQuery对象是另一个。你可以自己做一个：var a={“0”：“str1”，“1”：“str2”，长度：2}
在这里，我们再次使用旧浏览器……在IE 8及更低版本中，将主机对象传递给本机方法将失败。也许没人在意，但有些人可能会在意哦，它也不支持getElementsByClassName，但是querySelectorAll（'.myClass'）
应该可以工作。我仍在等待将迭代器添加到NodeList API：-（@Jer：如果你出于任何原因想打破循环，请附带说明Array.prototype.forEach
不会让你这么做。如果你以后有这个要求，请使用标准for
循环，或者如果你想使用数组对象，请使用Array.prototype.each
或Array.prototype.some
（请注意，IE8或更低版本中不支持每个/部分）@Ian您需要将对象拼接为“类似数组”。比较此处的日志：@Ian TBH“类似数组”的定义非常模糊，取决于使用情况。有时我不在该定义中包括拼接
，但当我想更“类似数组”时为了能够使用映射
，过滤器
等等，我将其包括在内。使用forEach
的简单迭代不需要拼接
。