最新のWeb開発のチュートリアル
 

HTML DOM querySelectorAll() Method

<ドキュメントオブジェクト

例

クラス=「例」で、ドキュメント内のすべての要素を取得します。

var x = document.querySelectorAll(".example");
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

querySelectorAll()メソッドは、指定されたCSS一致する文書内のすべての要素を返しselector(s)静的NodeListオブジェクトとして、。

NodeListオブジェクトは、ノードの集合を表します。 ノードは、インデックス番号によってアクセスすることができます。 インデックスは0から始まります。

ヒント：あなたが使用することができ、長さのすべての要素を、その後することができますループ、指定したセレクタに一致する要素の数を決定するためにNodeListオブジェクトのプロパティをして、必要な情報を抽出します。

CSSセレクタの詳細については、私たちの訪問CSSセレクタチュートリアルと私たちのCSSセレクタのリファレンスを 。

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
querySelectorAll() 4.0 9.0 3.5 3.2 10.0

注意：Internet Explorer 8ではCSS2セレクタをサポートしています。 IE9とそれ以降のバージョンにもCSS3のサポートを持っています。

構文

document.querySelectorAll( CSS selectors )

パラメータ値

パラメーター タイプ 説明
CSS selectors String 必須。 要素を照合するための1つのまたは複数のCSSセレクタを指定します。 これらは、など、属性の自分のID、クラス、種類、属性、値に基づいてHTML要素を選択するために使用されています

複数のセレクタのために、カンマで各セレクタを分離します。

ヒント：すべてのCSSセレクタのリストについては、私たちを見てCSSセレクタリファレンス 。

技術的な詳細

DOMバージョン： セレクタレベル1のドキュメントオブジェクト
戻り値： 指定されたCSS一致する文書内のすべての要素を表すNodeListオブジェクト、 selector(s) 。 NodeListのは、DOMの変更は、コレクション内の影響を与えないことを意味し、静的なコレクションです。 場合SYNTAX_ERR例外をスローselector(s)無効です
例

その他の例

例

すべての取得<p>文書内の要素を、第一の背景色設定<p>要素(index 0)

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
»それを自分で試してみてください

例

すべての取得<p>クラス=「例」で、文書内の要素を、最初の背景設定<p>要素を：

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0)
x[0].style.backgroundColor = "red"; 
»それを自分で試してみてください

例

クラス=「例」とどのように多くの要素を見つける（NodeListオブジェクトのlengthプロパティを使用して）文書にあります。

var x = document.querySelectorAll(".example").length;
»それを自分で試してみてください

例

クラス=「例」で、ドキュメント内のすべての要素の背景色を設定します。

var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

例

すべての背景色を設定し<p>ドキュメント内の要素を：

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

例

すべての境界線を設定し<a>持つドキュメント内の要素"target"属性を：

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
»それを自分で試してみてください

例

すべてのの背景色を設定し<p>親である要素<div>要素を：

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

例

すべての背景色を設定し、<H2>、 <div>や<span>ドキュメント内の要素：

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

関連ページ

CSSチュートリアル： CSSセレクタ

CSSリファレンス： CSSセレクタリファレンス

JavaScriptのチュートリアル： JavaScriptのHTML DOMノードリスト

HTML DOMリファレンス： ドキュメント。 querySelector()

HTML DOMリファレンス： 要素 。 querySelectorAll()

<ドキュメントオブジェクト