セレクターを使用した DOM 要素の特定

セレクター API により提供されるメソッドを用いると、一連のセレクターに一致する Element (要素) ノードを DOM から簡単かつ素早く取り出すことができます。これは過去の技術よりもはるかに速く、必要な場所で、例えば、 JavaScript コードでループを使用して検索する必要があるアイテムを特定するために使います。

NodeSelector インターフェース

この仕様書では、 Document, DocumentFragment, Element インターフェースを実装しているすべてのオブジェクトに対して二つの新しいメソッドを追加します。

querySelector()
ノードのサブツリー内で最初に一致した Element ノードを返します。一致する要素がなかった場合は null を返します。
querySelectorAll()
ノードのサブツリー内で一致するすべての Element ノードを含む NodeList を返すか、一致するものが見つからなかった場合は空の NodeList を返します。
メモ: querySelectorAll() が返す NodeList はライブではありません。すなわち、 DOM で行われた変更がコレクションに反映されません。これは他の DOM クエリメソッドがライブのノードリストを返すのと異なります。

例や詳細については、 Element.querySelector() および Element.querySelectorAll() メソッドの文書や、 querySelector のコードスニペットなどにあります。

セレクター

セレクターのメソッドには、コンマで区切られた一つ以上の抽出対象の要素を指定します。例えば、文書中で CSS のクラスが warning または note に指定されている全ての段落要素 (p) を抽出するには、次のようにします。

var special = document.querySelectorAll( "p.warning, p.note" );

もちろん、 ID による指定も可能です。例えば:

var el = document.querySelector( "#main, #basic, #exclamation" );

上記のコードが実行されると、el には ID が mainbasicexclamation である要素の内、最初の要素だけが格納されます。

例で示したように、 querySelector()querySelectorAll() メソッドではどの CSS セレクタでも用いることができます。

関連情報