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
関連情報
- セレクターを使用した DOM 要素の指定
querySelector()
のコードスニペット- CSS ガイドの属性セレクター
- MDN 学習エリアの属性セレクター
- メソッドは
Element.querySelectorAll()
,Document.querySelectorAll()
,DocumentFragment.querySelectorAll()
で利用可能です