HTML DOM lastChildプロパティとは？使い方をサンプルコード付きで解説
HTML DOM の lastChild プロパティは、指定したノードの最後の子ノードをノードオブジェクトとして返します。
注意： このプロパティは、テキストノードやコメントノードを無視しません。そのため、HTML 内で要素の間に空白や改行がある場合、それらも「子ノード」として扱われてしまう点に注意が必要です。
構文
lastChild プロパティの構文は以下の通りです。
最後の子ノードを取得する場合：
nodeList.lastChild
サンプルコード
HTML DOM lastChild プロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM lastChild</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-lastChild</legend>
<h3>Grocery Store</h3>
<ul id="dayList">
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li></ul>
// 閉じタグ <ul> の直前には空白を入れないこと。空白が最後の子ノードとして認識されてしまいます
<input type="button" onclick="getTimmings()" value="Get Sale Day">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var dayList = document.getElementById("dayList");
function getTimmings() {
divDisplay.textContent = 'Sale on last day of week: '+dayList.lastChild.textContent;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような出力が得られます。
「Get Sale Day」ボタンをクリックする前：
「Get Sale Day」ボタンをクリックした後：
補足：要素ノードだけを取得したい場合
上記の通り、lastChild プロパティは空白によるテキストノードも子ノードとして扱うため、意図しない動作の原因になることがあります。リストなどの要素ノードのみを確実に取得したい場合は、テキストノードを自動的に無視してくれる lastElementChild プロパティを使うことをおすすめします。
-
【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード
offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな
-
HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使