セレクターを使用した 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() メソッドの記事を参照してください。

セレクター

セレクターのメソッドはセレクターを受け入れて、どの要素または要素群を返すかを判断します。これはセレクターリストを含みますので、単一の問い合わせで複数のセレクターをグループ化することができます。

ユーザーのプライバシーを保護するために、一部の擬似クラスには対応していなかったり、異なる動作をしたりすることがあります。例えば :visited に一致するものは返されなかったり、 :link は :any-link と同様に扱われたりします。

要素のみが選択できますので、擬似クラスには対応していません。

例

文書中ですべての段落要素 (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 である要素の内、最初の要素だけが格納されます。

関連情報