DOM

：

：

ParentNode.querySelectorAll() メソッド

　編集：2022.11.09 by T.A.

[Edge]→、

ParentNode で指定の CSS セレクター群に一致する要素の（静的な）リストを NodeList で返します。

構文
ParentNode.querySelectorAll(selectors)
ParentNode ParentNode（Document、DocumentFragment、Element）。
selectors CSS セレクターを表す文字列 DOMString。セレクターが複数有る場合はカンマ「,」を含めてください。

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

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

戻り値

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

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

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

文書内のすべての <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");

¶以下省く

HTML： 

<SPAN class=Test>[SPAN要素]</SPAN>
<SPAN id=IdSpan>[SPAN要素。id=IdSpan<SPAN class="Test Test2">[SPAN要素2]</SPAN>テキスト<B class=Test2>[B要素]</B>テキスト]</SPAN>

JavaScript： 

D=document.querySelectorAll(".Test");  //＝[object]：[object NodeList]
	//0＝[object]：[object HTMLSpanElement]
	//1＝[object]：[object HTMLSpanElement]
	//2＝[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]：3
	//item＝[function]：function item() { [native code] }

D[0] 

＝[object]：[object HTMLSpanElement]

詳細title＝[string]：
lang＝[string]：
translate＝[boolean]：true
dir＝[string]：
hidden＝[boolean]：false
accessKey＝[string]：
draggable＝[boolean]：false
spellcheck＝[boolean]：true
textprediction＝[boolean]：true
autocapitalize＝[string]：
contentEditable＝[string]：inherit
enterKeyHint＝[string]：
isContentEditable＝[boolean]：false
inputMode＝[string]：
virtualKeyboardPolicy＝[string]：
offsetParent＝[object]：[object HTMLBodyElement]
offsetTop＝[number]：1937
offsetLeft＝[number]：37
offsetWidth＝[number]：105
offsetHeight＝[number]：19


innerText＝[string]：[SPAN要素]
…

D[1] 

＝[object]：[object HTMLSpanElement]

詳細title＝[string]：
lang＝[string]：
translate＝[boolean]：true
dir＝[string]：
hidden＝[boolean]：false
accessKey＝[string]：
draggable＝[boolean]：false
spellcheck＝[boolean]：true
textprediction＝[boolean]：true
autocapitalize＝[string]：
contentEditable＝[string]：inherit
enterKeyHint＝[string]：
isContentEditable＝[boolean]：false
inputMode＝[string]：
virtualKeyboardPolicy＝[string]：
offsetParent＝[object]：[object HTMLBodyElement]
offsetTop＝[number]：1937
offsetLeft＝[number]：346
offsetWidth＝[number]：116
offsetHeight＝[number]：19


innerText＝[string]：[SPAN要素2]
…

D[2] 

＝[object]：[object HTMLElement]

詳細title＝[string]：
lang＝[string]：
translate＝[boolean]：true
dir＝[string]：
hidden＝[boolean]：false
accessKey＝[string]：
draggable＝[boolean]：false
spellcheck＝[boolean]：true
textprediction＝[boolean]：true
autocapitalize＝[string]：
contentEditable＝[string]：inherit
enterKeyHint＝[string]：
isContentEditable＝[boolean]：false
inputMode＝[string]：
virtualKeyboardPolicy＝[string]：
offsetParent＝[object]：[object HTMLBodyElement]
offsetTop＝[number]：3350
offsetLeft＝[number]：530
offsetWidth＝[number]：72
offsetHeight＝[number]：19


innerText＝[string]：[B要素]
テスト