for文をforEach文で書き換えたい

Question

以下のfor文をforEachで書き換えたいのですがTypeError: btns.forEach is not a function at ChangeCSSといったエラーになり、原因がわかりません。

どこが原因なのでしょうか？

// 正常
function ChangeCSS() {
    let btns = document.getElementsByClassName('buttons');

    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', () => {
            btns[i].classList.toggle('clicked');
        });
    }
}
ChangeCSS();

// 異常
function ChangeCSS() {
    let btns = document.getElementsByClassName('buttons');

    btns.forEach(btn => {
        btn.addEventListener('click', () => {
            btn.classList.toggle('clicked');
        });
    })
}
ChangeCSS();

Answer 1

どこが原因なのでしょうか？

エラーメッセージのとおりです。getElementsByClassNameで返ってくるオブジェクトは配列ではないので、forEachメソッドは存在しません。

let btns = Array.from(document.getElementsByClassName('buttons'));など、適当な方法で配列に変換する必要があります。

Comments

[maisumakun]

なお、document.querySelectorAll()の返り値は（新しいブラウザでは）forEachメソッドが存在します。

[gyoruo]

そういうことですか！
ありがとうございます。
querySelectorAllを用いて配列にするとできました！