※プログラミング学習中の私がアップロードしてます。私の理解が浅いです。
この記事は厳密な仕様に関するものではなく、考え方理解のまとめとして受け取ってください。
指定したセレクタのグループにマッチしたdocument内(documentノードのdepth-first(深さ優先)、 pre-order traversal(前順走査)を使用して)の最初の要素を返します。
文法
element = document.querySelector(selectors);
| 引数 | 説明 |
|---|---|
| selectors | 型：string--selectorsは1つまたはカンマで区切られた複数のCSSセレクタを含む文字列です。 |
| 戻り値 | 説明 |
| element | elementは、elementオブジェクトです。 |
例
この例では、document内のmyclassクラス付きの最初の要素を返します。
var el = document.querySelector(".myclass");
| 訳注)上記のように単純にクラス名で探す場合はgetElementsByClassName()を、IDで探す場合はgetElementById()メソッドを使用するべきです。 |
|---|
注意事項
もし、マッチするものが見つからなければnullを返します。 そうでなければ、最初にマッチした要素を返します。セレクタがIDとマッチし、またそのIDがドキュメント内で複数回使用する誤った扱いをされている場合、最初にマッチした要素を返します。もし指定したセレクタのグループが不正なものであれば、SYNTAX_ERR例外をスローします。
querySelector()はWebApps APIで導入されました。querySelectorへ渡される文字列引数は、CSS文法に従ったものでなければいけません。Selectors APIで指定されたCSS擬似クラスは、要素を返しません。CSS文法に従っていない(例えば、コロンまたは不適切な空白を使用したもの)IDまたはセレクタにマッチさせるには、バックスラッシュを使用して文字をエスケープしなければいけません。バックスラッシュはJavaScript内のエスケープ文字であり、もしリテラル文字として扱うのであれば、2重エスケープを行う必要があります。
js STUDIO
https://js.studio-kingdom.com/javascript/document/query_selector