DocumentquerySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

メモ: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

構文

element = document.querySelector(selectors);

引数

selectors
1つまたは複数のセレクターを含む DOMString。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SYNTAX_ERR が投げられます。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。

メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は特殊文字のエスケープを参照してください。

返値

文書内で指定された CSS セレクターに最初に一致する要素を示す HTMLElement オブジェクト、もしくは、一致する要素がない場合は null を返します。

指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに querySelectorAll() を使用してください。

例外

SYNTAX_ERR
指定された selectors の構文が妥当ではない。

使用上のメモ

指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。

CSS 擬似要素Selectors API で策定されている通り、何も要素を返しません。

特殊文字のエスケープ

標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("\") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを2回エスケープする必要があります (1回目は JavaScript の文字列のため、2回目は querySelector() のため)。

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  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 に一致する
</script>

あるクラスに一致する最初の要素を探索する

次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。

var el = document.querySelector(".myclass");

より複雑なセレクター

セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である <div> (<div class="user-panel main">) の中にある、 "login" という名前を持つ最初の <input> 要素 (<input name="login"/>) が返されます。

var el = document.querySelector("div.user-panel.main input[name='login']");

仕様書

仕様書 状態 備考
DOM
document.querySelector() の定義
現行の標準

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
querySelectorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,