document.querySelectorAll() 対応: Selectors API（2008）

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

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

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

<ul>
	<li class="item">りんご</li>
	<li class="item">みかん</li>
	<li class="item">ぶどう</li>
</ul>

// すべてのli要素を取得します。
var items = document.querySelectorAll(".item");
console.log(items.length); // 『3』と出力されます。

// forEachでループ処理します。
items.forEach(function(item) {
	console.log(item.textContent);
});
// "りんご" "みかん" "ぶどう"

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

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

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

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