概要
与えられた CSS セレクタにマッチする文書中の要素(※深さ優先の先行順走査によるもの)の全てのリスト (NodeList
) を返します。
構文
elementList = document.querySelectorAll(selectors);
※返される NodeList オブジェクトには、指定セレクタに一致する文書内のすべての要素が含まれます。 selectors に CSS 疑似要素の文字列を含めた場合、elementList は空になります。
例
文書中の、 "lightbox
" または "popup
" のクラス名を持つすべての div 要素のノードリストを返します。
var matches = document.querySelectorAll( "div.lightbox, div.popup" );
注記
戻り値はマッチした要素のライブなものでない NodeList
です。
もし指定したセレクタグループが valid なものでない場合、 SYNTAX_ERR
例外がスローされます。
querySelectorAll()
は WebApps API より導入されたものです。
WebKit ブラウザのバグ : selectors
文字列に CSS pseudo-element が含まれる場合、戻り値の elementList
は空ではなく <html>
要素となります。
querySelectorAll
に渡す引数は、CSS の構文に準じるものでなくてはなりません。具体的な例については document.querySelector
のページを参照してください。
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1 | 3.5 (1.9.1) | 9 8 (CSS2 selectors only) |
10 | 3.2 (525.3) |
機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | 2.1 | yes | 9 | 10.0 | 3.2 |