.querySelectorAll()

要素上でセレクタ指定することで、その要素の子孫の中からグループをマッチし、 その全要素の実稼働していない(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

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。