HTML DOMドキュメントquerySelector（）
例
最初の<p>要素を取得します。
document.querySelector("p");
class = "example"で最初の要素を取得します：
document.querySelector(".example");
以下のその他の例。
定義と使用法
このquerySelector()メソッドは、CSSセレクターに一致する最初の要素を返します。
（最初の一致だけでなく）すべての一致を返すには、querySelectorAll()代わりにを使用します。
両方ともNodeListquerySelector()をquerySelectorAll()返します。
セレクターが無効な場合は、両方ともSYNTAX_ERR例外querySelector()をスローします。querySelectorAll()
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.querySelector(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が返されます。 |
その他の例
class = "example"で最初の<p>要素を取得します：
document.querySelector("p.example");
id = "demo"で要素のテキストを変更します。
document.querySelector("#demo").innerHTML = "Hello World!";
親が<div>要素である最初の<p>要素を選択します。
document.querySelector("div > p");
「target」属性を持つ最初の<a>要素を選択します。
document.querySelector("a[target]");
最初の<h3>または最初の<h4>を選択します。
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
最初の<h3>または最初の<h4>を選択します。
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
ブラウザのサポート
document.querySelector()DOMレベル1（1998）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |