→
Document で指定されたセレクターまたはセレクターのグループに一致する最初の Element を返します。
¶注意： スタイルシートの指定ではなく、実際に要素で指定されたセレクターのことのようです。
一致するものが見つからない場合は null を返します。
Note： 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査（depth-first pre-order traversal）を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。
| selectors | DOMString で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は SyntaxError が発生します。セレクターとその管理の方法の詳細について、“”を参照してください。
Note： 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は“特殊文字のエスケープ”を参照してください。 |
|---|
Element オブジェクト。一致する要素がない場合は null を返します。
指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに querySelectorAll() を使用してください。
指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。
は で策定されている通り、何も要素を返しません。
標準の CSS の構文に従っていない ID やセレクター（例えば、コロンや空白を不適切に使用しているもの）に一致させるためには、バックスラッシュ（"\"）でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを 2 回エスケープする必要があります（1 回目は JavaScript の文字列のため、2 回目は querySelector() のため）。
HTML：
<div id="foo\bar"></div> <div id="foo:bar"></div>
JavaScript：
console.log('#foo\bar'); // "#fooar" (\b はバックスペース制御文字)
document.querySelector('#foo\bar'); // いずれにも一致しない
console.log('#foo\\bar'); // "#foo\bar"
console.log('#foo\\\\bar'); // "#foo\\bar"
document.querySelector('#foo\\\\bar'); // 最初の div に一致する
document.querySelector('#foo:bar'); // いずれにも一致しない
document.querySelector('#foo\\:bar'); // 2番目の div に一致する
次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。
var el = document.querySelector(".myclass");
セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で <input> に "login" という名前の付いた最初のもの（<input name="login"/>）のうち、<div> でクラスが "user-panel main"（<div class="user-panel main">）の中にあるものが返されます。
var el = document.querySelector("div.user-panel.main input[name='login']");
¶省く
以下のCSSが組み込んであります：
JavaScript：
D=document.querySelector(".Test") //＝null。得られなかった
以下のHTMLを組み込むと、得られるようになった。
HTML：
<SPAN class=Test>てすと</SPAN>
スタイルシートで指定していなくても、以下のHTMLを組み込む
<SPAN class=Test2>てすと</SPAN>
D=document.querySelector(".Test2") //＝[object HTMLSpanElement]
と、取得できた。