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

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

querySelector()

ノードのサブツリー内で最初に一致した Element ノードを返します。一致する要素がなかった場合は null を返します。

querySelectorAll()

ノードのサブツリー内で一致するすべての Element ノードを含む NodeList を返すか、一致するものが見つからなかった場合は空の NodeList を返します。

Note: 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 である要素の内、最初の要素だけが格納されます。

• セレクター仕様書
• CSS セレクター
• Element.querySelector()
• Element.querySelectorAll()
• Document.querySelector()
• Document.querySelectorAll()