js STUDIO

.querySelectorAll()

指定したセレクタのグループにマッチしたdocument内(documentノードの depth-first(深さ優先)、 pre-order traversal(前順走査)を、 を使用して)の要素のリストを返します。 返されるリストはNodeListです。

文法 

elementList = document.querySelectorAll(selectors);
引数 説明
selectors

型：string

selectorsは1つまたはカンマで区切られた複数のCSSセレクタを含む文字列です。

戻り値 説明
elementList

elementListは、elementオブジェクトが実稼働してしない(liveでは無い)、 NodeListです。

返されるNodeListは、selectorsによってマッチしたdocument内の全ての要素を含みます。 もし、selectors文字列がCSS擬似要素を含む場合、 返されるelementListは空になります。

例

この例では、document内の全ての"note"または"alert"のどちらかのクラスを持つdiv要素のリストを返します。 

var matches = document.querySelectorAll("div.note, div.alert");

注意事項

  • 全てにマッチした要素ノードの実稼働中では無い(non-live)NodeListを返します。
  • もし指定したセレクタのグループが無効なものであれば、SYNTAX_ERR例外をスローします。
  • querySelectorAll()はWebApps APIで導入されました。
  • WebKitブラウザのバグ: CSS擬似要素がセレクタ文字列に含まれると、 返されるelementListは空ではなく、<html>要素が含まれます。

ブラウザ互換性

デスクトップ
機能 Chrome Firefox
(Gecko)		 IE Opera Safari
基本 1 3.5 (1.9.1) 9
8 (CSS2 selectors only)		 10 3.2 (525.3)
モバイル
機能 Android Firefox
Mobile		 IE
Mobile		 Opera
Mobile		 Safari
Mobile
基本 2.1 ◯ 9 10.0 3.2

仕様

関連項目

 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の更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。