We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

対象要素の子孫の内、引数に指定した 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 の定義
廃止された 初期定義

ブラウザ実装状況

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 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,