Element.firstElementChild - 最初の子要素を取得する

投稿日: / 更新日:

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

説明

ElementオブジェクトのfirstElementChildプロパティは、最初の子要素を含みます。テキストノード、コメントノードは含みません。子要素がない場合はnullが返ります。

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

// 最初の子要素を取得 ( → <li>要素1</li> )
var firstElementChild = ulElement.firstElementChild ;

似たプロパティにfirstChildがあります。firstChildプロパティとfirstElementChildプロパティの違いは何でしょうか？それは「テキストノード、コメントノードを含むか否か」です。

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

// 最初の子ノードを取得 ( → テキストノード (改行とタブ文字) )
var firstChild = ulElement.firstChild ;

例えば、同じul要素のfirstChildプロパティは1つ目のli要素ではありません。何故なら、ul要素の開始タグと1つ目のli要素の間には、改行とタブ文字が存在するからです。そのためfirstChildプロパティには、この改行とタブ文字のテキストノードが含まれるんです。

firstElementChildプロパティは要素以外の余計なテキストノードやコメントノードを無視してくれる点で有用です。仮に、ul要素の開始タグと1つ目のli要素の間に文字がなければ、firstChildとfirstElementChildプロパティの内容は同じです。

サンプルコード

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

// 最初の子要素を取得 ( → <li>要素1</li> )
var firstElementChild = ulElement.firstElementChild ;

デモ

ul要素のfirstElementChildプロパティを取得して表示します。コンソールでオブジェクトの中身を確認できます。

構文

readonly Element firstElementChild = Element.firstElementChild

返り値

項目説明
firstElementChild最初の子要素。コメントノード、テキストノードは無視される。

関連項目

外部リンク