document.querySelectorAll

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

構文

elementList = document.querySelectorAll(selectors);

引数

selectors

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

返り値

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

例外

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

仕様

ブラウザ互換性

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

関連情報

• セレクタを使用した DOM 要素の指定
• CSS ガイドの属性セレクタ
• MDN Learning Area の属性セレクタ
• Element.querySelector() 及び Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() 及び DocumentFragment.querySelectorAll()
• ParentNode.querySelector() 及び ParentNode.querySelectorAll()
• Code snippets for querySelector()