指定したセレクタのグループにマッチした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重エスケープを行う必要があります。

<!-- 特殊な文字をIDに指定したDIVタグ -->
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<!-- スクリプト -->
<script>
  // "#fooar"を出力
  console.log('#foo\bar')

  // どれにもマッチしません
  document.querySelector('#foo\bar')

  // "#foo\bar"
  console.log('#foo\\bar')



  // "#foo\\\\bar"を出力
  console.log('#foo\\\\bar')

  // 1つ目のDIVとマッチします。
  document.querySelector('#foo\\\\bar')

  // どれにもマッチしません
  document.querySelector('#foo:bar')

  // 2つ目のDIVとマッチします。
  document.querySelector('#foo\\:bar')
</script>

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1	3.5 (1.9.1)	8	10	3.2 (525.3)

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	2.1	◯	9	10.0	3.2

仕様

関連項目

• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Code snippets for querySelector

 Back to top