web-dev-qa-db-ja.com

getElementsByClassNameの配列でforEachを使用すると、「TypeError：undefined is a functionではない」という結果になります

私の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>
javascriptforeach
90
Jer

これは、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=>{
159
Denys Séguret

これを試してみてください：

<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

特定のクラスの各要素のIDにアクセスする場合は、次を実行できます。

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