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

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

構文

element = document.querySelector(selectors);

引数

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

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

返値

指定された CSS セレクターにマッチする、文書内の最初の要素を示す Element オブジェクト。

指定されたセレクターにマッチする、すべての要素のリストが必要な場合は、代わりに querySelectorAll() を使うべきです。

例外

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

使用上のメモ

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

Selectors API 仕様のとおり、CSS 擬似要素は、決してどの要素も返しません。

特別文字のエスケープ

標準の 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>

class にマッチする最初の要素を探索する

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

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

より複雑なセレクター

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

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

仕様書

仕様書 状態 備考
Selectors API Level 2
document.querySelector() の定義
廃止された
Selectors API Level 1
document.querySelector() の定義
廃止された 初回定義

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 1 (有) 3.5 8 10 3.2
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 2.1 (有) (有) 9 10.0 3.2

関連情報

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

最終更新者: mfuji09,