HTML DOMlastChildプロパティ
例
<ul>要素の最後の子ノードのHTMLコンテンツを取得します。
var x = document.getElementById("myList").lastChild.innerHTML;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
lastChildプロパティは、指定されたノードの最後の子ノードをNodeオブジェクトとして返します。
このプロパティと lastElementChildの違いは、lastChildが最後の子ノードを要素ノード、テキストノード、またはコメントノード(どちらが最後かによって異なります)として返すのに対し、lastElementChildは最後の子ノードを要素ノードとして返す(テキストを無視する)ことです。およびコメントノード)。
注:要素内の空白はテキストと見なされ、テキストはノードと見なされます(「その他の例」を参照)。
このプロパティは読み取り専用です。
ヒント:要素.childNodesプロパティを使用して 、指定したノードの子ノードを返します。
ヒント:指定したノードの最初の子ノードを返すには、firstChildプロパティを使用します。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
lastChild | Yes | Yes | Yes | Yes | Yes |
構文
node.lastChild
技術的な詳細
戻り値: | ノードの最後の子を表すNodeオブジェクト、または子ノードがない場合はnull |
---|---|
DOMバージョン | コアレベル1ノードオブジェクト |
その他の例
例
この例では、空白がこのプロパティとどのように相互作用するかを示します。
<div>要素の最後の子ノードのノード名を取得します。
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the last child node of <div> is a #text node, and not the <span> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
例
ただし、ソースから空白を削除すると、<div>に#textノードがなくなり、<span>要素が最後の子ノードになります。
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
例
<select>要素の最後の子ノードのテキストを取得します。
var x = document.getElementById("mySelect").lastChild.text;
関連ページ
HTML DOMリファレンス:ノード。firstChildプロパティ
HTML DOMリファレンス:ノード。childNodesプロパティ
HTML DOMリファレンス:ノード。parentNodeプロパティ
HTML DOMリファレンス:ノード。nextSiblingプロパティ
HTML DOMリファレンス:ノード。previousSiblingプロパティ
HTML DOMリファレンス:ノード。nodeNameプロパティ