JavaScript/DOM/querySelectorAll

querySelectorAll()

querySelectorAll() は、DocumentまたはElementオブジェクトのメソッドであり、指定したCSSセレクターに一致するすべての要素をNodeListとして返します。このNodeListはArray-Likeオブジェクトで、イテレーションが可能です。

概要

querySelectorAll() は、DOMツリー内の複数の要素をCSSセレクターを使用して取得するためのメソッドです。返されるNodeListは静的リストで、DOMが変更されても自動的に更新されることはありません。

構文

elements = document.querySelectorAll(selectors);

selectors - CSSセレクター文字列（例：要素、クラス、ID）。
戻り値: 指定したセレクターに一致するすべてのElementを含むNodeList。

使用例

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

// すべての<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';
});

注意点

返されるNodeListは静的（静的リスト）であり、DOMが変更されても自動で更新されません。
- 動的なリストが必要な場合はgetElementsByClassName()やgetElementsByTagName()を使用してください。
NodeListはArray-Likeオブジェクトであり、Arrayメソッドを直接使用する場合はArray.from()で配列に変換する必要があります。

例：

const elements = document.querySelectorAll('.item');
const elementArray = Array.from(elements);

elementArray.map(el => console.log(el.textContent));

比較: querySelectorAll() と querySelector()

メソッド	返り値	概要
`querySelector()`	最初に一致した要素	1つの要素のみ取得
`querySelectorAll()`	一致したすべての要素のNodeList	複数要素を取得

ブラウザ対応

querySelectorAll()は、すべての主要なブラウザでサポートされています。

ブラウザ	対応バージョン
Google Chrome	1以上
Firefox	3.5以上
Safari	3.2以上
Edge	12以上
Opera	10以上

外部リンク

Document.querySelectorAll() - MDN Web Docs