Использование forEach для массива из getElementsByClassName приводит к "TypeError: undefined не является функцией"

на мой JSFiddle, Я просто пытаюсь перебрать массив элементов. Массив не является пустым,как показывают операторы log. И все же призыв к forEach дает мне (не так полезно) " Uncaught 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>
3 84
javascript foreach

3 ответа:

потому что document.getElementsByClassName возвращает a HTMLCollection, а не массив.

к счастью это "массив-как" объект (что объясняет, почему он регистрируется, как если бы это был объект и почему вы можете повторять со стандартным 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=>{
154

попробуйте это должно работать : 

<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>
10

в случае, если вы хотите получить доступ к идентификатор каждого элемента определенного класса, вы можете сделать следующее:

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