対象要素の子孫の内、引数に指定した CSS セレクタのグループにマッチする要素群の(ライブなものでない) NodeList を返します。(起点となる要素は、たとえマッチしていても含まれません)

注: この API の定義は ParentNode インターフェイスに移動しました。

構文

elementList = baseElement.querySelectorAll(selectors);
elementList
element オブジェクトの非ライブなリスト
baseElement
走査の対象とする element オブジェクト
selectors
探索する CSS セレクタ

次の例では、 HTML 文書の body 要素の中に存在する全ての p 要素のリストを取得しています。

var matches = document.body.querySelectorAll('p'); 

次の例では、「クラス名に "highlighted" を持つ div 要素群の、直接の子要素である p 要素群」のリストを返します。

let el = document.querySelector('#test');    //return an element with id='test'
let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"

次の例では、'data-src' 属性を持つ iframe 要素のリストを取得しています。

var matches = el.querySelectorAll('iframe[data-src]'); 

注記

指定した "selectors" がページのDOMに見つからない場合、queryselectorAll メソッドは下記のように空のノードリストを返します:

> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
> [] //empty NodeList

querySelectorAll() は WebApps API で導入されました。

querySelectorAll に渡す引数は CSS 構文に従わねばなりません。完全な例は document.querySelector を見てください。

ノードリストの各項目にアクセスするには、下記の方法をとります:

let x = document.body.querySelectorAll('.highlighted'); 
x.length; //return the size of x
x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"

下記のように for(....) {...} 構造によってノードリストを繰り返すことができます:

 let x = document.body.querySelectorAll('.highlighted');
 let index = 0;
 for( index=0; index < x.length; index++ ) {
       console.log(x[index]);
 }

このような方法で、ページのふるまいを管理したり修正したりできます。

特殊な例

querySelectorAll() は一般的な JavaScript DOM ライブラリーと違ったふるまいをして、予想外の結果をもたらすこともあります:

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>
let select = document.querySelector('.select');
let inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

この例では、.outer が baseElement (.select)の子孫ではなくても、.select のコンテキストで、.outer .inner を選択したとき、 .innerがまだ見つかります。
querySelectorAll() は単に baseElement の中にセレクタの最後の要素があるかだけを検証します。

:scope 疑似要素は期待するふるまいを回復し、baseElement の子孫でセレクタにマッチしたものだけとなります:

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

仕様

仕様書 策定状況 コメント
Selectors API Level 1
querySelectorAll の定義
廃止された 初期定義

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

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

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

関連情報

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

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