HTML DOM querySelectorAll（）メソッド

例

<div>要素内のclass = "example"を使用して、最初の要素の背景色を設定します。

// 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";

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

querySelectorAll（）メソッドは、指定されたCSSセレクターに一致する要素の子要素のコレクションを静的NodeListオブジェクトとして返します。

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

ヒント： NodeListオブジェクトのlengthプロパティを使用して、指定したセレクターに一致する子ノードの数を決定できます。次に、すべてのノードをループして、必要な情報を抽出できます。

CSSセレクターの詳細については、 CSSセレクターチュートリアルと CSSセレクターリファレンスをご覧ください。

ブラウザのサポート

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

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

注： Internet Explorer8はCSS2セレクターをサポートしています。IE9以降のバージョンでは、CSS3もサポートされています。

構文

element.querySelectorAll(CSS selectors)

パラメータ値

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

技術的な詳細

DOMバージョン：	セレクターレベル1ドキュメントオブジェクト
戻り値：	指定されたCSSセレクターに一致する現在の要素のすべての子孫要素を表すNodeListオブジェクト。NodeListは静的コレクションです。つまり、DOMの変更はコレクションに影響を与えません。注：指定されたセレクターが無効な場合、SYNTAX_ERR例外をスローします

その他の例

例

<div>要素内のすべての<p>要素を取得し、最初の<p>要素（インデックス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";

例

class = "example"を使用して<div>内のすべての<p>要素を取得し、最初の<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>要素にclass = "example"の要素がいくつあるかを調べます（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>要素のclass = "example"ですべての要素の背景色を設定します。

// 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";
}

例

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

// 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";
}

例

「target」属性を持つ<div>要素内のすべての<a>要素の境界線スタイルを設定します。

// 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";
}

例

<div>要素内のすべての<h2>、<div>、および<span>要素の背景色を設定します。

// 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";
}

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References