選択された要素を反復処理する

概要: このチュートリアルでは、forEach() メソッドと for ループを使用して、選択された要素を反復処理する方法を学びます。

querySelectorAll() または getElementsByTagName() を使用して要素を選択すると、要素のコレクションが NodeList として取得されます。

選択された要素を反復処理するには、forEach() メソッド（ほとんどの最新Webブラウザでサポートされており、IEは除く）を使用するか、従来の forループを使用できます。

forEach() メソッドの使用

次のコードは、CSSクラスが .note のすべての要素を選択し、背景色を黄色に変更します。

const notes = document.querySelectorAll('.note');

notes.forEach((note) => {
    note.style.backgroundColor = 'yellow';
});Code language: JavaScript (javascript)

または、次のように Array オブジェクトの forEach() メソッドを 借用することもできます。

[].forEach.call(notes, (note) => {
    note.style.backgroundColor = "yellow";
});Code language: PHP (php)

for ループの使用

次のコードは、for ループを使用して、選択された要素を反復処理します。

const notes = document.querySelectorAll('.note');
const count = notes.length;

for (let i = 0; i < count; i++) {
    notes[i].style.backgroundColor = "yellow";
}Code language: JavaScript (javascript)