JavaScript

JavaScript querySelector method.

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>