ParentNode.querySelectorAll() - Web API

ParentNode ミックスインは querySelectorAll() メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す NodeList を返します。

単一の結果のみが必要な場合は、代わりに querySelector() メソッドを使用することを検討してください。

メモ: このメソッドは Element.querySelectorAll(), Document.querySelectorAll(), DocumentFragment.querySelectorAll() として実装されています。

構文

elementList = parentNode.querySelectorAll(selectors);

引数

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

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

返値

生きていない NodeList で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの Element を含みます。

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

例外

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

例

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

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

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

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

次に、 test という ID を持つコンテナ内に位置し、直接の親要素が highlighted クラスを持つ <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]");

ユーザーのメモ

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

ブラウザーの互換性

BCD tables only load in the browser