DOM

：

：

Document.querySelectorAll() メソッド

　編集：2022.11.09 by T.A.

Edge。→、

Document で指定 CSS セレクターに一致する文書中の要素の（静的な、ライブではない）リストを NodeList で返します。

構文
Document.querySelectorAll(selectors)
Element.querySelectorAll(selectors)
selectors DOMString で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は SyntaxError が発生します。

セレクターとその管理の方法の詳細について、“”を参照してください。

Note： 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は“特殊文字のエスケープ”を参照してください。

戻り値

ライブではない NodeList。指定されたセレクターの少なくとも 1 つに一致する要素ごとに Element を一つずつ含みます。または一致するものがなければ空の NodeList です。

Note： 指定された selectors が を含む場合、返されるリストは常に空になります。

例外
SyntaxError
指定された selectors の構文が妥当ではない。
例
一致するもののリストの入手

文書内のすべての <p> 要素の NodeList を入手します。 

const matches = document.querySelectorAll("p");

次の例では、文書内にあるすべての <div> 要素のうち、note または alert のいずれかのクラスを持つものリストを返します。 

const matches = document.querySelectorAll("div.note, div.alert");

次に、<p> 要素ののうち直近の親要素が test という ID を持つコンテナー内に位置し、直接の親要素が highlighted クラスを持つ <div> であるリストを取得します。 

const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");

¶以下省く

テスト