element.querySelectorAll

概要

対象要素の子孫の内、引数に指定した CSS セレクタのグループにマッチする要素群の（ライブなものでない） NodeList を返します。

構文

elementList = baseElement.querySelectorAll(selectors);

• elementList: element オブジェクトの非ライブなリスト
• baseElement: 走査の対象とする element オブジェクト
• selectors: 探索する CSS セレクタ

例

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

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

次の例では、querySelector メソッドを用いて id が "#test" のノードを変数 elm に代入。そして次に、「最初に取得した elm の子孫でクラス名に "highlight" を持つ div 要素群の、直接の子要素である p 要素群」に該当するノードのリストを変数 matches に代入しています。

var elm = document.querySelector('#test'),
    matches = elm.querySelectorAll('div.highlighted > p'); 

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

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

注記

指定したセレクタグループが有効な書式で無かった場合、例外 「 SYNTAX_ERR 」がスローされます。

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

返される値は NodeList です。故に、これを for..in ループの走査の対象としたり、これに対しビルトインの配列のメソッドを用いようとした場合はエラーが発生します。 NodeList に対し配列のメソッドを用いたい場合は、予め NodeList を配列に変換する必要があるという点に注意して下さい。

ブラウザ実装状況

仕様書

• Selectors API Level 1REC
• Selectors API Level 2WD
• Selectors API Level 2ED

関連情報

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