要素上でセレクタ指定することで、その要素の子孫の中からグループをマッチし、 その全要素の実稼働していない(non-live)NodeListを返します。

文法

elementList = baseElement.querySelectorAll(selectors);

引数	説明
selectors	マッチさせるセレクタのグループを指定します。
戻り値
elementList	要素(Element)オブジェクトの実稼働していない(non-live)リストを返します。

例

この例では、HTMLのdocumentのbody内の全てのp要素のリストを返します。

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

この例では、まずid属性がtestである要素を取得し、 その要素内で親要素が'highlighted'のclassを持つdivである、pの子要素のリストを返します。

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

この例では、data属性が'src'を含むiframe要素のリストを返します。

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

注意事項

指定されたセレクタのグループが不正である場合、SYNTAX_ERR例外をスローします。

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

querySelectorAll()に渡す引数の文字列は、CSS文法に従ったものでなければいけません。 document.querySelectorで実際の例を確認してください。

戻り値がNodeListであることを忘れないで下さい。 そして、foo...inのループ、及びよく知られている配列メソッドを使用しないことをお勧めします。 もし配列メソッドを使用するのであれば、使用する前にNodeListを変換しておく必要があります。

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

仕様

Selectors API

関連項目

• element.querySelector()
• document.querySelectorAll
• document.querySelector
• Code snippets for querySelector

 Back to top