DOM

：

：

Element.querySelectorAll() メソッド

　編集：2022.09.22 by T.A.

[Edge]。→

element の子孫要素のうち、セレクター群に一致するもののリストを静的な（ライブではない）NodeList で返します。

構文
element.querySelectorAll(selectors)
element Element。
selectors 照合するセレクター群を表す DOMString です。これは有効な CSS 構文でなければならず、そうでない場合は SyntaxError 例外が発生します。セレクターが複数ある場合はカンマ「,」を含めてください。"セレクター1, セレクター2, …"

→

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

戻り値

ライブではない NodeList で、各要素は Element のリストです。または、該当が無ければ空のリストになります。

mdn： 指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの Element を含みます。

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

例外
SyntaxError
指定された selectors の構文が妥当ではない。
例

HTML： 

<SPAN id=IdTest>[SPAN要素2<B class=Test>[B要素]</B>テキスト<EM>[EM要素<I class=Test2>[I要素]</I>]</EM>]</SPAN>

JavaScript： 

D=IdTest.querySelectorAll(".Test, .Test2"); //＝[object]：[object NodeList]
	//0＝[object]：[object HTMLElement]
	//1＝[object]：[object HTMLElement]
	//entries＝[function]：function entries() { [native code] }
	//keys＝[function]：function keys() { [native code] }
	//values＝[function]：function values() { [native code] }
	//forEach＝[function]：function forEach() { [native code] }
	//length＝[number]：2
	//item＝[function]：function item() { [native code] }
DA=D[0]; //＝[object]：[object HTMLElement]
	//title＝[string]：
	//…
	//offsetTop＝[number]：1715
	//offsetLeft＝[number]：141
	//offsetWidth＝[number]：72
	//offsetHeight＝[number]：19
	//innerText＝[string]：[B要素]
	//…
DA=D[1]; //＝[object]：[object HTMLElement]
	//title＝[string]：
	//…
	//offsetTop＝[number]：1715
	//offsetLeft＝[number]：355
	//offsetWidth＝[number]：60
	//offsetHeight＝[number]：19
	//innerText＝[string]：[I要素]
	//…
関連

closest()。querySelectorAll()。

テスト