クラス、タグ、属性の選択

// すべての<p>タグを取得
const paragraphs = document.querySelectorAll('p');

// 特定のクラスを持つ要素を取得
const items = document.querySelectorAll('.item');

// 特定の属性を持つ要素を取得
const dataElements = document.querySelectorAll('[data-id]');

console.log(paragraphs, items, dataElements);

イテレーション処理

NodeListを反復処理して各要素にアクセスする例です。

// querySelectorAllで取得
const elements = document.querySelectorAll('.list-item');

// forEachを使って各要素を処理
elements.forEach((element, index) => {
  console.log(`要素${index}:`, element.textContent);
});

// for...ofループでも処理可能
for (const element of elements) {
  console.log('要素の内容:', element.textContent);
}

スタイル変更

一致するすべての要素のスタイルを一括で変更する例です。

const boxes = document.querySelectorAll('.box');

// 各要素に背景色を適用
boxes.forEach(box => {
  box.style.backgroundColor = 'lightblue';
});