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

HTML DOM querySelectorAll() Method

<Elementオブジェクト

例

クラス=「例」の最初の要素の背景色を設定内<div>要素。

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example"); 

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

もっと"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のサポートを持っています。

構文

element .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>内の要素<div>要素を、第一の背景色設定<p>要素(index 0)

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p"); 

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

例

すべての取得<p>の要素<div>クラス=「例」とすると、第1の背景設定<p>要素を：

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 

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

例

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

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length; 
»それを自分で試してみてください

例

で、クラス=「例」を持つすべての要素の背景色を設定して<div>要素：

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

例

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

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

例

すべての境界線のスタイルを設定し<a>内の要素<div>持っている要素"target"属性を：

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
»それを自分で試してみてください

例

背景色を設定し、すべての<H2>、 <div>や<span>中の要素<div>要素：

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
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()

<Elementオブジェクト