Element.children- 全ての子要素を取得する

投稿日: / 更新日:

JavaScriptの、Elementオブジェクトのchildrenは全ての子要素を取得するプロパティです。

説明

Elementオブジェクトのchildrenプロパティは、その要素の全ての子要素を含むHTMLCollection(≠配列)です。要素が対象であって、テキストノードやコメントノードはカウントされません。

<ul>
	<li>要素1</li>
	<li>要素2</li>
	<li>要素3</li>
</ul>
// ulElement = <ul> ... </ul>

// ul要素のchildren
// ulElement.children[0] = <li>要素1</li>
// ulElement.children[1] = <li>要素2</li>
// ulElement.children[2] = <li>要素3</li>

例えば、上記ul要素のchildrenプロパティは、3つのli要素を含むHTMLCollection(≠配列)です。では、childrenプロパティとchildNodesプロパティの違いは何でしょうか？それは、childrenプロパティは「子要素」なのに対して、childNodesプロパティは「子ノード」だということです。もっと簡単に言うと「テキストノードとコメントノードを含むか否か」です。

<ul>↓
	<li>要素1</li>↓
	<li>要素2</li>↓
	<li>要素3</li>↓
</ul>
// ulElement = <ul> ... </ul>

// ul要素のchildNodes
// ulElement.children[0] = TextNode (改行とタブ)
// ulElement.children[1] = <li>要素1</li>
// ulElement.children[2] = TextNode (改行とタブ)
// ulElement.children[3] = <li>要素2</li>
// ulElement.children[4] = TextNode (改行とタブ)
// ulElement.children[5] = <li>要素3</li>
// ulElement.children[6] = TextNode (改行)

childNodesプロパティは全ての子ノードを含むノードリストです。子要素ではなく子ノード。例えば同じul要素のchildNodesプロパティは、合計で7つのノードが含まれます。これは、li要素とli要素の間にある改行やタブ文字がテキストノードとして、ul要素の子ノードにカウントされるからです。用途に合わせて、childrenプロパティとchildNodesプロパティを使い分けましょう。

HTMLCollectionは配列と似て非なるものです。配列のようにhoge[0]、hoge[1]とキー番号で参照したりlengthプロパティで要素数を確認できますが、forEach()など、配列に使えるメソッドは利用できません。

サンプルコード

<ul id="target">
	<li>要素1</li>
	<li>要素2</li>
	<li>要素3</li>
</ul>
// 要素を取得
var ulElement = document.getElementById( "target" ) ;

// 全ての子要素を取得
var children = ulElement.children ;

デモ

ul要素のchildrenプロパティを取得して表示します。コンソールでHTMLCollection(≠配列)の中身を確認できます。

構文

readonly HTMLCollection children = Element.children

返り値

項目説明
children全ての子要素を含んだHTMLCollection。

関連項目

外部リンク