element.querySelectorAll

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

構文

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

仕様

ブラウザ実装状況

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

関連情報

• element.querySelector()
• document.querySelectorAll()
• document.querySelector()
• querySelector のコードスニペット