Element.lastElementChild - 最後の子要素を取得する

投稿日: / 更新日:

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

説明

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

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

// 最後の子要素を取得 ( → <li>要素3</li> )
var lastElementChild = ulElement.lastElementChild ;

似たプロパティにlastChildがあります。lastChildプロパティとlastElementChildプロパティの違いをはっきりさせておくと、用途によって使い分けができます。違いは取得するのに「テキストノード、コメントノードを含むか否か」です。

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

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

同じul要素のlastChildプロパティは3つ目のli要素ではありません。何故なら、3つ目のli要素とul要素の終了タグの間には改行とタブ文字が存在するからです。lastChildプロパティには、テキストノードとコメントノードを無視しないため、この改行とタブ文字を最後のノードとして認識するわけです。

仮に3つ目のli要素とul要素の終了タグとの間に文字がなければ、lastChildとlastElementChildプロパティの内容は同じです。要素だけを考える場合、lastElementChildプロパティは有用です。

サンプルコード

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

// 最後の子要素を取得 ( → <li>要素3</li> )
var lastElementChild = ulElement.lastElementChild ;

デモ

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

構文

readonly Element lastElementChild = Element.lastElementChild

返り値

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

関連項目

外部リンク