Element.childElementCount- 子要素の数を取得する

投稿日: / 更新日:

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

説明

ElementオブジェクトのchildElementCountプロパティは、その要素の子要素の数を含みます。要素が対象であって、テキストノードやコメントノードはカウントされません。子要素が存在しない場合、0が返ります。

<ul>
	<li>要素1</li>
	<li>要素2</li>
	<li>要素<span>3</span></li>
</ul>

上記の場合、ul要素のchildElementCountプロパティは3となります。1つ目、2つ目のli要素は0、3つ目のli要素は1です。

<ul>
	<li>要素1</li>
	<li>要素2</li>
	<li>要素<span>3</span></li>
</ul>

子要素とは下位方向に直属の要素です。従って、3つ目のli要素に含まれるspan要素は、ul要素の子要素ではありません。だから、ul要素のchildElementCountプロパティは4ではなく3です。span要素は、li要素に直属だけど、ul要素に直属ではないですよね。

サンプルコード

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

// 子要素の数を取得 ( → 3 )
var childElementCount = ulElement.childElementCount ;

デモ

ul要素のchildElementCountプロパティを取得して表示します。

構文

readonly unsigned long childElementCount = Element.childElementCount

返り値

項目説明
childElementCount子要素の数。テキストノード、コメントノードはカウントしない。

関連項目

外部リンク