document.querySelector

概要

与えられた 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 仕様で定義されました。

ブラウザ実装状況

仕様書

• Selectors API Level 1REC
• Selectors API Level 2WD
• Selectors API Level 2ED

関連情報

• document.querySelectorAll
• element.querySelector
• element.querySelectorAll
• querySelector のコードスニペット