ElementquerySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) NodeList を返します。

メモ: このメソッドは ParentNode ミックスインの querySelectorAll() メソッドを元に実装されています。

構文

elementList = parentNode.querySelectorAll(selectors);

引数

selectors
マッチのための 1 つまたは複数のセレクターを含む DOMString。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、コンマで区切ります。

メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は Escaping special characters を参照してください。

返値

指定されたセレクターの少なくとも一つに一致する要素ごとに Element を一つずつ含む、生きていない NodeList、または一致するものがなければ空の NodeList です。

メモ: 指定された selectorsCSS 擬似要素を含む場合、返されるリストは常に空になります。

例外

SyntaxError
指定された selectors の構文が妥当ではない。

一致のリストの入手

文書内のすべての <p> 要素の NodeList を入手します。

var matches = document.querySelectorAll("p");

次の例では、文書内にある "note" または "alert" のいずれかの class を持つ、すべての <div> 要素のリストを返します。

var matches = document.querySelectorAll("div.note, div.alert");

次に、"test" という ID を持つコンテナ内に位置し、直接の親要素が "highlighted" class を持つ div である、<p> 要素のリストを取得します。

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

次の例では属性セレクターを使用しており、"data-src" という名前の属性を持つ、文書内の iframe 要素のリストを返します。

var matches = document.querySelectorAll("iframe[data-src]");

次の例では、ID が "userlist" の要素の中にあり、"data-active" 属性を持ち、その値が "1" であるリスト項目のリストを返すため、属性セレクターが使用されています。

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

一致したリストへのアクセス

一旦、一致した要素の NodeList が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

ユーザーのメモ

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

HTML

次の、入れ子になった 3 つの <div> ブロックを持つ HTML について検討します。

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

JavaScript

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1 です。0 ではありません!

この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素(.select で検索される)の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

:scope 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0

仕様書

仕様書 状態 備考
DOM
ParentNode.querySelectorAll() の定義
現行の標準 Living standard
Selectors API Level 2
ParentNode.querySelectorAll() の定義
廃止された 変更なし
DOM4
ParentNode.querySelectorAll() の定義
廃止された 初回定義
Selectors API Level 1
document.querySelector() の定義
廃止された 独自の定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 10Safari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, sii, Uemmra3, fscholz, ethertank
最終更新者: mfuji09,