HTML DOMドキュメントquerySelectorAll（）
例
class = "example"ですべての要素を選択します：
document.querySelectorAll(".example");
以下のその他の例。
定義と使用法
このquerySelectorAll()メソッドは、CSSセレクターに一致するすべての要素を返します。
このquerySelectorAll()メソッドはNodeListを返します。
セレクターが無効な場合、querySelectorAll()メソッドはSYNTAX_ERR例外をスローします
HTML DOM NodeList / HTMLCollection
HTMLCollectionとNodeListの違い
NodeListとHTMLCollectionはどちらも、ドキュメントから抽出されたノード（要素）の配列のようなコレクション（リスト）です。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。
両方のオブジェクトには、リスト内の要素の数を返すlengthプロパティがあります。
HTMLCollectionはライブコレクションです。DOMのリストに<li>要素を追加すると、HTMLCollectionのリストも変更されます。
NodeListは静的コレクションです。DOMのリストに<li>要素を追加しても、NodeListのリストは変更されません。
getElementsByClassName()andメソッドはgetElementsByTagName()
HTMLCollectionを返します。
querySelector()andメソッドはquerySelectorAll()
NodeListを返します。
構文
document.querySelectorAll(CSS selectors)
パラメーター
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
戻り値
| タイプ | 説明 |
| 物体 | CSSセレクターに一致する要素を持つNodeList 。 一致するものが見つからない場合は、 nullが返されます。 |
その他の例
最初の<p>要素に背景色を追加します。
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
class = "example"を使用して、最初の<p>要素に背景色を追加します。
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
class = "example"の要素の数：
let numb = document.querySelectorAll(".example").length;
class = "example"を使用して、すべての要素の背景色を設定します。
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
すべての<p>要素の背景色を設定します。
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
すべての<a>要素の境界を「target」属性で設定します。
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
親が<div>要素であるすべての<p>要素の背景色を設定します。
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
すべての<h3>、<div>、および<span>要素の背景色を設定します。
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ブラウザのサポート
document.querySelectorAll()DOMレベル3（2004）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |