JavaScriptのquerySelectorAllで取得したNodeListのスタイルやクラスを操作する

サンプルコード

<!-- HTML -->
<p class="a">A</p>
<p class="a">A</p>
<p class="a">A</p>

<button class="js-triger">文字色を変更する</button>

<script>
    const btnTriger = document.querySelector('.js-triger');
    btnTriger.addEventListener('click', ()=>{
        const all = document.querySelectorAll('.a');
        console.log(all); // NodeList(3) [p.a, p.a, p.a]
        for (const elem of all) {
            elem.style.color = 'red';
            elem.classList.add('add')
        }
    });
</script>

はまった（間違った）コード

<script>
    const btnTriger = document.querySelector('.js-triger');
    btnTriger.addEventListener('click', ()=>{
        const all = document.querySelectorAll('.a');
        console.log(all); // NodeList(3) [p.a, p.a, p.a]
        all.style.color = 'red';
        all.classList.add('add')
    });
</script>

実行すると下記エラーが表示される。

Uncaught TypeError: Cannot set property 'color' of undefined at HTMLButtonElement.<anonymous>

つまりall.styleが未定義とのこと。
原因はquerySelectorAllの返り値がNodeListであるため。
NodeListはノードの集合であるため、個々にスタイルやクラスを操作する必要がある。

解決方法

NodeList - Web API | MDN
上記サイトを参考に。

forで回して処理をする

サンプルコードとは違うが、下記コードでも実現可能。

for (let i =0; i <all.length; i++) {
    all[i].style.color = 'red';
    all[i].classList.add('add')
}

サンプルコードで使用したfor...of文を使用すればもっと簡潔に書ける。
ソースはサンプルコード参照。