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

В мой 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>

Ответ 1

Это потому, что document.getElementsByClassName возвращает 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=>{

Ответ 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>

Ответ 3

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

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