web-dev-qa-db-fra.com

L'utilisation de forEach sur un tableau de getElementsByClassName génère «TypeError: undefined n'est pas une fonction»

Dans mon JSFiddle , j'essaie simplement de parcourir un tableau d'éléments. Le tableau n'est pas vide, comme le prouvent les instructions du journal. Pourtant, l'appel à forEach m'indique l'erreur (pas si utile) "Uncaught TypeError: undefined n'est pas une fonction".

Je dois faire quelque chose de stupide; Qu'est-ce que je fais mal?

Mon code:

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>
javascriptforeach
91
Jer

En effet, _document.getElementsByClassName_ renvoie un HTMLCollection , pas un tableau.

Heureusement, il s'agit d'un objet "semblable à un tableau" (ce qui explique pourquoi il est consigné comme s'il s'agissait d'un objet et pourquoi vous pouvez effectuer une itération avec une boucle standard for):

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

Avec ES6 (sur les navigateurs modernes ou avec Babel), vous pouvez également utiliser Array.from qui construit des tableaux à partir d'objets de type tableau:

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

ou répartissez l'objet de type tableau dans un tableau:

_[...document.getElementsByClassName('myClass'))].forEach(v=>{
_
159
Denys Séguret

Essayez ceci ça devrait marcher:

<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>
11
Vaibhav Jain

si vous souhaitez accéder à l'ID de chaque élément d'une classe spécifique, vous pouvez effectuer les opérations suivantes:

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