Document.querySelector()

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

element = document.querySelector(selectors);

selectors

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

文書内で指定された 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']");

すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。

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

これで、input 要素のうち親に user-panel クラスのついた div があるものの、main クラスがないものを 1 つ選択します。

• セレクターを使用した DOM 要素の指定
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()
• querySelector のコードスニペット