document.querySelector

概要

与えられた CSS セレクタにマッチする文書中の最初の要素(※深さ優先の先行順走査によるもの)を返します。

構文

element = document.querySelector( selectors );
  • elementelement オブジェクトを表します。
  • 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

仕様書

関連情報

Document Tags and Contributors

Contributors to this page: saneyuki_s, ethertank, myakura, tatsuya
最終更新者: ethertank,