セレクタ API により提供されるメソッドを用いることで、セレクタのセットにマッチする要素ノードを簡単に、かつ手早く DOM から抽出することができます。これは過去に使われていたテクニックに比べ随分高速な処理が行われるため、例えば JavaScript コードのループ内部で要素を特定する場合などに威力を発揮します。
NodeSelector インターフェース
この仕様追加に伴い、 Document, DocumentFragment, Element インターフェースを承継している全てのオブジェクトに対し、新たに以下の二種類のメソッドが追加されます。
querySelector- ノード木中から最初にマッチした要素ノードを返します。マッチする要素がなかった場合は
nullが返されます。 querySelectorAll- ノード木中からマッチした全ての要素ノードを含む
NodeListを返します。マッチする要素がなかった場合は空のNodeListが返されます。
注意:
querySelectorAll() が返す NodeList は最新のものではありません（訳注: is not live; ノードに対するスクリプト上での操作が反映されていないものが返る、という意味だと思われる）。これは他の DOM クエリメソッドが最新のノードリストを返すのとは対照的であり、注意が必要です。querySelector() や querySelectorAll() メソッドについての文書や、 Code snippets for querySelector には例となるコードやより詳しい解説が記されています。
セレクタ
セレクタ API のメソッドには、カンマで区切られた一つ以上の抽出対象の要素を指定します。例えば、文書中で 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 セレクタでも用いることができます。