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

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

構文

elementList = document.querySelectorAll(selectors);

引数

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

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

返り値

指定されたセレクタの少なくとも 1 つにマッチする要素について 1 つの Element オブジェクトを含む、生きていない NodeList

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

例外

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

マッチした要素のリストを入手する

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

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" という名前の属性を持つ、文書内の div 要素のリストを返します。

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() の定義
廃止された 独自定義

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1 3.5 (1.9.1) 8 10 3.2 (525.3)
:scope 擬似クラス (有) 32 未サポート 15[1] 7.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1.9.1) ? ? 3.2
:scope 擬似クラス ? 32 未サポート 未サポート  

[1] Opera 15以上で、chrome://flags"Enable <style scoped>" または "Enable experimental Web Platform features" フラグを有効にすることでサポートされます。 

関連情報

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

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