DOM

Node.childNodes プロパティ

 編集:2022.10.28 by T.A.

[Edge]。読取専用。→

Node の全ての子ノード リストを NodeList で返します。

Node がテキスト ノードの場合、ノードが無い(空要素など)場合は length が 0 となります。

mdn: NodeList で指定された要素の子ノードの生きたリストを返し、最初の子ノードは位置 0 に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。

mdn: メモ: NodeList が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。

mdn: ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノード オブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、elementNodeReference.childNodes[0].nodeName を使うことで実現できます。

mdn: document オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは documentElement として参照されます。HTML 文書の場合、後者は <html> 要素です。

mdn: 覚えておくべき重要なこととして、childNodes にはすべての子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。要素のみが含まれるコレクションを取得するのであれば、Element.children を代わりに使用してください。

構文
Node.childNodes
Node 要素のNode オブジェクト。

生きた NodeList です。

HTML:

<SPAN id=IdTest>[SPAN要素。テキスト<B id=IdB>[B要素]</B>テキスト2<I id=IdI></I>]</SPAN><BR>

JavaScript:

D=IdTest.childNodes;
DA=IdI.childNodes;

得た内容:D

=[object]:[object NodeList]
0=[object]:[object Text]
1=[object]:[object HTMLElement]
2=[object]:[object Text]
3=[object]:[object HTMLElement]
4=[object]:[object Text]
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]:5
item=[function]:function item() { [native code] }

得た内容:DA

=[object]:[object NodeList]
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]:0
item=[function]:function item() { [native code] }

JavaScript:

D=IdTest.firstChild;  //=[object]:[object Text]…
DA=D.childNodes;  //=[object]:[object NodeList]
	//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]:0
	//item=[function]:function item() { [native code] }

Node がテキスト ノードの場合は childNodes は lengt が 0 になる。ま、当然。

firstChild

¶省く


テスト