概要
与えられた CSS セレクタにマッチする文書中の最初の要素（※深さ優先の先行順走査によるもの）を返します。
構文
element = document.querySelector( selectors );
elementは element オブジェクトを表します。selectorsはマッチさせたい 1 つ以上のセレクタを表します。
例
次の例は、クラスに "myClass" を持つ要素の内、最初のものを返します。
var el = document.querySelector(".myClass");
【訳注: 上記ではクラスセレクタを用いた検索を例示していますが、この様な単発のクラス名の場合は getElementsByClassName() メソッドを用いた方が高速な動作となります。また、ID セレクタ ( # ) を対象とする検索も可能ですが、その場合は getElementById() メソッドを用いた方が高速です。対象セレクタが流動的である場合や、または隣接セレクタなどによるコンビネーションセレクタでの複雑な検索の場合において、querySelector() や querySelectorAll() は真価を発揮します。】
注記
マッチする要素が無い場合は null が返ります。その他の場合は、最初にマッチした要素を返します。
指定されたセレクタが不正である時は、例外 "SYNTAX_ERR" が返ります。
querySelector() は、Selectors API 仕様で定義されました。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1 | 3.5 (1.9.1) バグ 416317 |
8 | 10 | 3.2 (525.3) WebKit bug 16587 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 2.1 | yes | 9 | 10.0 | 3.2 |