Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- document.querySelectorAll()
document.querySelectorAll()対応: Selectors API（2008）
CSSセレクタを使用して、ドキュメント内から条件に一致するすべてのHTML要素を取得します。戻り値はNodeListオブジェクトです。NodeListオブジェクトについては概要を確認してください。
構文
// ドキュメント全体から取得します。
var elements = document.querySelectorAll("セレクタ");
// 特定のHTML要素内から取得します。
var elements = 親要素.querySelectorAll("セレクタ");
引数
| 引数 | 概要 |
|---|---|
| セレクタ | CSSセレクタの文字列を指定します。CSSで使用できるセレクタであればどのような書式でも指定可能です。複数のセレクタをカンマ区切りで指定することもできます。 |
戻り値
条件に一致するすべての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);
});
// "りんご" "みかん" "ぶどう"
実行結果
3つの『.item』に該当するHTML要素がすべて取得され、forEachでループした結果、コンソールには以下が出力されます。
3 // items.length "りんご" // 1番目の要素 "みかん" // 2番目の要素 "ぶどう" // 3番目の要素
概要
『document.querySelectorAll()』は条件に一致するすべてのHTML要素をNodeListとして取得するメソッドです。『document.querySelector()』が最初の1つだけを返すのに対し、こちらは一致するすべてのHTML要素を返します。
戻り値のNodeListは配列に似たオブジェクトで、『length』プロパティやインデックスでのアクセスが可能です。また、『forEach()』メソッドを使ったループ処理も行えます。
注意点として、NodeListは取得した時点のスナップショットであり、後からDOMにHTML要素が追加されても自動的には反映されません。最新の状態を取得したい場合は、再度『document.querySelectorAll()』を呼び出す必要があります。
『document.querySelectorAll()』はチュートリアル記事『querySelector() CSSセレクタの記法から要素を取得』で、より詳しく解説しています。良ければご覧下さい。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする