document.querySelectorAll()

// ドキュメント全体から取得します。
var elements = document.querySelectorAll("セレクタ");

// 特定のHTML要素内から取得します。
var elements = 親要素.querySelectorAll("セレクタ");

条件に一致するすべてのHTML要素を含むNodeListオブジェクトを返します。NodeListオブジェクトは配列のように扱うことができ、一致するHTML要素が存在しない場合は空のNodeListが返されます。

sample_querySelectorAll.html

<ul id="sorcerers">
	<li class="member grade-special">五条悟</li>
	<li class="member grade-1">両面宿儺</li>
	<li class="member grade-1">虎杖悠仁</li>
	<li class="member grade-1">伏黒恵</li>
	<li class="member grade-1">釘崎野薔薇</li>
</ul>

sample_querySelectorAll.js

// パターン1: クラス名ですべての要素を取得する
var members = document.querySelectorAll(".member");
console.log(members.length); // 『5』と出力されます。

// パターン2: forEachでループ処理する
members.forEach(function(el) {
	console.log(el.textContent);
});
// 『五条悟』『両面宿儺』『虎杖悠仁』『伏黒恵』『釘崎野薔薇』と順番に出力されます。

// パターン3: 複数のセレクタをカンマ区切りで指定する
var grade1 = document.querySelectorAll(".grade-1");
console.log(grade1.length); // 『4』と出力されます。

// パターン4: インデックスで特定の要素を取得する
var first = document.querySelectorAll(".member")[0];
console.log(first.textContent); // 『五条悟』と出力されます。

// パターン5: 一致する要素がない場合は空のNodeListが返される（nullにならない）
var none = document.querySelectorAll(".nonexistent");
console.log(none.length); // 『0』と出力されます。
if (none.length > 0) {
	// 要素がある場合の処理
}

サンプルページはこちら

『document.querySelectorAll()』は条件に一致するすべてのHTML要素をNodeListとして取得するメソッドです。『document.querySelector()』が最初の1つだけを返すのに対し、こちらは一致するすべてのHTML要素を返します。

戻り値のNodeListは配列に似たオブジェクトで、『length』プロパティやインデックスでのアクセスが可能です。また、『forEach()』メソッドを使ったループ処理も行えます。

注意点として、NodeListは取得した時点のスナップショットであり、後からDOMにHTML要素が追加されても自動的には反映されません。最新の状態を取得したい場合は、再度『document.querySelectorAll()』を呼び出す必要があります。

『document.querySelectorAll()』はチュートリアル記事『querySelector() CSSセレクタの記法から要素を取得』で、より詳しく解説しています。良ければご覧下さい。