HTML DOM querySelectorAll()メソッド

Document 对象参考手册 Document オブジェクト

例

ドキュメント内の class="example" のすべての要素を取得:

var x = document.querySelectorAll(".example");

試してみる »

定義と使い方

querySelectorAll() メソッドは、ドキュメント内で指定された CSS セレクタに一致するすべての要素を返します。返されるのはNodeListオブジェクトです。

NodeList オブジェクトはノードのコレクションを表します。インデックスでアクセスでき、インデックス値は 0 から始まります。

ヒント:NodeList オブジェクトの lengthlength プロパティを使用して、セレクタに一致する要素の数を取得し、その後すべての要素を走査して、必要な情報を取得できます。

その他の CSS セレクタについては、以下を参照してくださいCSS セレクタチュートリアル， CSS セレクタリファレンス。

ブラウザサポート

表内の数字は、このメソッドをサポートする最初のブラウザのバージョン番号を示します。

メソッド
querySelectorAll()	4.0	8.0	3.5	3.2	10.0

注意:Internet Explorer 8 は CSS2 セレクタをサポートしています。IE9 以降のブラウザは CSS3 セレクタをサポートしています。

構文

elementList = document.querySelectorAll(selectors);

elementList は静的な NodeList 型のオブジェクトです。
selectors は、カンマで区切られた 1 つ以上の CSS セレクタを含む文字列です。

属性値

パラメータ	型	説明
CSS セレクタ	String	必須です。CSS セレクタに一致する 1 つ以上の要素を指定します。id、class、型、属性、属性値などをセレクタとして使用して要素を取得できます。複数のセレクタはカンマ(,)で区切ります。ヒント:CSS セレクタの詳細については、以下を参照してくださいCSS セレクタリファレンス。

メソッド

DOM バージョン:	Level 1 Document Object
戻り値:	ドキュメント内で指定された CSS セレクタに一致するすべての要素を表す NodeList オブジェクト。NodeList は静的な NodeList 型のオブジェクトです。指定されたセレクタが無効な場合は、SYNTAX_ERR 例外がスローされます。

その他の例

例

ドキュメント内のすべての <p> 要素を取得し、一致した最初の <p> 要素 (インデックス 0) に背景色を設定します:

//ドキュメント内のすべての <p> 要素を取得 var x = document.querySelectorAll("p"); //最初の <p> 要素の背景色を設定 x[0].style.backgroundColor = "red";

試してみる »

例

ドキュメント内の class="example" のすべての <p> 要素を取得し、一致した最初の <p> 要素 (インデックス 0) に背景色を設定します:

//ドキュメント内の class="example" のすべての <p> 要素を取得 var x = document.querySelectorAll("p.example"); //class="example" の最初の <p> 要素の背景色を設定 x[0].style.backgroundColor = "red";

試してみる »