ywork2020.com

Title

親要素に包含された最後の子要素を取得する

目次 (INDEX)

lastElementChildとは

ここで説明するlastElementChild とは次の語句からなるjavascriptのプロパティです。
last
読み: ラスト
意味: 最後の、末尾の
element
読み: エレメント
意味: 要素
child
読み: チャイルド
意味: 子、子供

目次に戻る

lastElementChildプロパティの概要

このプロパティは、親要素に包含された最後の子要素をElementオブジェクトとして取得します。

このプロパティは読み取り専用です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var elmLastChild = Element.lastElementChild;

目次に戻る

サンプルコードと実行結果

このサンプルでは親要素にdiv要素を置き、子要素に3つのspan要素を包含しています。

結果には親要素のプロパティ使って取得した末尾の子要素のid属性値を出力しています。 また末尾の子要素のinnerTextに"ラストチャイルド"と出力しています。

サンプルコード: CSS
<style>
	border: medium solid ##midnightblue;
	background-color: ##lightblue;
	line-height: 4em;
	padding: 10px;
</style>
サンプルコード: HTML
<body>
	<div id="idParent">
		< span class ="clsChild" id="idChild1">子要素1< /span><br>
		< span class ="clsChild" id="idChild2">子要素2< /span><br>
		< span class ="clsChild" id="idChild3">子要素3< /span>
	</div>
	<p><output id="idOutput">innerText</output></p>
</body>
  • 02: div (親要素です。この要素のlastElementChildを使って末尾の子要素を取得しています。)
  • 03: span (末尾の子要素です。id="idChild3"です。)
サンプルコード: script
<script>
	let elmParent = document.getElementById("idParent");
	let elmOutput = document.getElementById("idOutput");
	let elmLChild = elmParent.lastElementChild;
	elmOutput.innerText = elmLChild.id;
	elmLChild.innerText = "ラストチャイルド";
</script>
  • 04: 子要素の取得 (elmLChildという変数に末尾の子要素オブジェクトを取得し、代入します。)
  • 05: idの出力 (output要素に末尾の子要素のid値を出力します。)
  • 06: テキストの出力 (末尾の子要素のコンテンツに"ラストチャイルド"を出力します。)
実行結果:
サンプル要素:
子要素1
子要素2
子要素3

結果:
innerText

目次に戻る