[Edge]。→、
ParentNode の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。
ParentNode | ParentNode(Document、DocumentFragment、Element)。 |
---|---|
selectors | CSS セレクターを表す文字列です。セレクターが複数ある場合はカンマ「, 」を含めてください。"セレクター1, セレクター2, … "
|
要素オブジェクト。または、一致するものが見つからなかったら null。
mdn: ParentNode の子孫要素のうち、selectors で指定されたセレクター群に一致するものを返します。照合の際には、ParentNode とその子孫を含む要素群の外にあるものも含めて、要素の階層全体を考慮します。言い換えると、selectors はまず ParentNode ではなく、文書全体に適用され、候補となる要素の初期リストが生成されます。その結果得られた要素が、ParentNode の子孫であるかどうかが調べられます。それらの残りの要素のうち、最初に一致したものが querySelector() メソッドによって返されます。
HTML:
<SPAN class=Test>[SPAN要素1]</SPAN> <SPAN id=IdTest>[SPAN要素2<B class=Test>[B要素]</B>テキスト<EM>[EM要素<I class=Test>[I要素]</I>]</EM>]</SPAN>
JavaScript:
D=IdTest.querySelector(".Test"); //=[object]:[object HTMLElement]
//title=[string]:
//lang=[string]:
//…
//offsetTop=[number]:1211
//offsetLeft=[number]:264
//offsetWidth=[number]:72
//offsetHeight=[number]:19
//innerText=[string]:[B要素]
//…
HTML:
<SPAN id=IdTest>[SPAN要素2<B class=Test2>[B要素]</B>テキスト<EM>[EM要素<I class=Test>[I要素]</I>]</EM>]</SPAN>
JavaScript: selectors のセレクターを複数指定。
D=IdTest.querySelector(".Test, Test2"); //=[object]:[object HTMLElement]
//title=[string]:
//lang=[string]:
//…
//offsetTop=[number]:1668
//offsetLeft=[number]:355
//offsetWidth=[number]:60
//offsetHeight=[number]:19
//innerText=[string]:[I要素]
//…
selectors の複数指定は、"第1候補, 第2候補, …"?。