セレクターを使用した DOM 要素の特定
セレクター API により提供されるメソッドを用いると、一連のセレクターに一致する要素 (Element
) ノードを DOM から簡単かつ素早く取り出すことができます。これは過去の技術よりもはるかに速く、必要な場所で、例えば、 JavaScript コードでループを使用して検索する必要があるアイテムを特定するために使います。
NodeSelector インターフェイス
この仕様書では、 Document
, DocumentFragment
, Element
インターフェイスを実装しているすべてのオブジェクトに対して 2 つの新しいメソッドを追加しています。
querySelector()
-
ノードのサブツリー内で最初に一致した
Element
ノードを返します。一致する要素がなかった場合はnull
を返します。 querySelectorAll()
-
ノードのサブツリー内で一致するすべての
Element
ノードを含むNodeList
を返すか、一致するものが見つからなかった場合は空のNodeList
を返します。
メモ: querySelectorAll()
が返す NodeList
はライブではありません。すなわち、 DOM で行われた変更がコレクションに反映されません。これは他の DOM クエリーメソッドがライブのノードリストを返すのと異なります。
例や詳細については、 Element.querySelector()
および Element.querySelectorAll()
メソッドの記事を参照してください。
セレクター
例
文書中ですべての段落要素 (p
) のうち、 CSS のクラスが warning
または note
に指定されているものを抽出するには、次のようにします。
const special = document.querySelectorAll("p.warning, p.note");
もちろん、次のように ID による指定も可能です。
const el = document.querySelector("#main, #basic, #exclamation");
上記のコードが実行されると、el
には ID が main
、 basic
、 exclamation
である要素の内、最初の要素だけが格納されます。