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 オブジェクト、もしくは、もしマッチする要素がなければ null を返します。

指定されたセレクターにマッチする、すべての要素のリストが必要な場合は、代わりに 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() の定義
廃止された 初回定義

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 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,