セレクターを使用した 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 が main、 basic、 exclamation である要素の内、最初の要素だけが格納されます。
例で示したように、 querySelector() や querySelectorAll() メソッドではどの CSS セレクタでも用いることができます。