HTML DOM 要素 querySelectorAll() メソッド
- 前のページ querySelector()
- 次のページ remove()
- 上一階層に戻る HTML DOM Elements オブジェクト
定義と使用法
querySelectorAll() メソッドは、指定された CSS 選択子に一致する要素の子要素のコレクションを返し、静的な NodeList オブジェクトとして提供します。
NodeList
NodeList はクラス配列のノードコレクション（リスト）です。
リスト内のノードはインデックス（インデックス）でアクセスできます。インデックスは 0 から始まります。
length 属性はリスト内のノード数を返します。
も参照してください：
リファレンスマニュアル：
チュートリアル：
例
例 1
div 内の class="example" の最初の要素の背景色を設定します：
// id="myDIV" の要素（div）を取得し、その div 内の class="example" を持つすべての要素を取得
var x = document.getElementById("myDIV").querySelectorAll(".example");
// div 内の最初の class="example" (インデックス 0) の要素の背景色を設定
x[0].style.backgroundColor = "red";
ヒント：以下のページにはさらに多くの例があります。
構文
element.querySelectorAll(cssSelectors)
パラメータ
| パラメータ | 説明 |
|---|---|
| cssSelectors |
必須。文字列。一つまたは複数の CSS 選択子を指定して、要素をマッチングします。 CSS 選択子は、id、クラス、タイプ、属性、属性値などに基づいて HTML 要素を選択するために使用されます。 複数の選択子に対して、各選択子をカンマで区切ります。 ヒント：すべての CSS 選択子のリストについては、以下を参照してください。 CSS セレクタ リファレンスマニュアル。 |
技術的詳細
| 返り値： |
NodeList オブジェクトは、指定された CSS 選択子に一致する現在のすべての要素の後裔要素を表します。 NodeList は静的な集合であり、これは DOM 内の変更が集合に影響を与えないことを意味します。 注意：指定された選択子が無効な場合、SYNTAX_ERR 例外が投げられます |
|---|---|
| DOM バージョン： | Selectors Level 1 Document Object |
さらに詳しい例
例 2
div 元素内のすべての <p> 要素を取得し、最初の <p> 要素（インデックス 0）の背景色を設定します：
// id="myDIV" の要素（div）を取得し、その div 内のすべての p 要素を取得します
var x = document.getElementById("myDIV").querySelectorAll("p");
// div 内の最初の <p> 要素（インデックス 0）の背景色を設定
x[0].style.backgroundColor = "red";
例 3
div 内の class="example" を持つすべての <p> 要素を取得し、最初の <p> 要素の背景を設定します：
// id="myDIV" の要素（div）を取得し、その div 内のすべての class="example" の p 要素を取得します
var x = document.getElementById("myDIV").querySelectorAll("p.example");
// div 内の class="example" の最初の <p> 要素（インデックス 0）の背景色を設定します
x[0].style.backgroundColor = "red";
例 4
<div> 要素内に class="example" を持つ要素の数を調べます（NodeList オブジェクトの length 属性を使用して）：
/* id="myDIV" の要素（div）を取得し、その div 内のすべての class="example" の p 要素を取得し、見つかった要素の数を返します */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;
例 5
<div> 要素内の class="example" のすべての要素の背景色を設定します：
// id="myDIV" の要素（div）を取得し、その div 内のすべての class="example" 要素を取得します
var x = document.getElementById("myDIV").querySelectorAll(".example");
// for ループを作成し、div 内のすべての class="example" 要素の背景色を設定します
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
例 6
<div> 要素内のすべての <p> 要素の背景色を設定します：
// id="myDIV" の要素（div）を取得し、その div 内のすべての p 要素を取得します
var x = document.getElementById("myDIV").querySelectorAll("p");
// for ループを作成し、div 内のすべての p 要素の背景色を設定します
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
例 7
<div> 要素内のすべての target 属性を持つ <a> 要素の枠線スタイルを設定します：
// id="myDIV" の要素（div）を取得し、その div 内のすべての "target" 属性を持つ <a> 要素を取得します
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for ループを作成し、div内のすべてのtarget属性を持つ<a>要素の枠を設定
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
例 8
<div>要素内のすべての<h2>、<div>、<span>要素の背景色を設定：
// id="myDIV"の要素（div）を取得し、<div>内のすべての<h2>、<div>、<span>要素を取得
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for ループを作成し、<div>内のすべての<h2>、<div>、<span>要素の背景色を設定
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ブラウザのサポート
この表の数字は、このメソッドを完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
注意：Internet Explorer 8 は CSS2 セレクタをサポートしています。IE9 以降のバージョンでは CSS3 もサポートされています。
関連ページ
CSS タイプ：CSS セレクタ
CSS 参考マニュアル：CSS セレクタ リファレンスマニュアル
JavaScript タイプ：JavaScript HTML DOM ノードリスト
JavaScript 参考マニュアル：element.querySelector()
HTML DOM 参考マニュアル：document.querySelectorAll()
- 前のページ querySelector()
- 次のページ remove()
- 上一階層に戻る HTML DOM Elements オブジェクト
