HTML DOM lastChild 属性
实例
获取 <ul> 元素的最后一个子节点的HTML内容:
var x = document.getElementById("myList").lastChild.innerHTML;
亲自试一试 »
页面下方有更多实例。
定义和用法
lastChild property 属性将指定节点的最后一个子节点作为节点对象返回。
此属性与 lastElementChild 的区别在于， lastChild 将最后一个子节点作为元素节点、文本节点或注释节点返回（取决于最后一个节点）， 而 lastElementChild 将最后一个子节点作为元素节点返回（忽略文本和注释节点）。
注释: 素内部的空白被视为文本，文本被视为节点（请参阅"更多示例"）。
该属性是只读的。
提示: 使用 element.childNodes 属性返回指定节点的任何子节点。
提示: 要返回指定节点的第一个子节点，请使用 firstChild 属性。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| lastChild | Yes | Yes | Yes | Yes | Yes |
语法
node.lastChild
技术细节
| 返回值: | Node 节点对象，表示节点的最后一个子节点，如果没有子节点，则为 null |
|---|---|
| DOM 版本 | Core Level 1 Node Object |
更多实例
实例
在这个例子中，我们演示了空格如何与这个属性相冲突。
获取 <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>
亲自试一试 »
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>
亲自试一试 »
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
相关页面
HTML DOM 参考手册: node.firstChild 属性
HTML DOM 参考手册: node.childNodes 属性
HTML DOM 参考手册: node.parentNode 属性
HTML DOM 参考手册: node.nextSibling 属性
HTML DOM 参考手册: node.previousSibling 属性
HTML DOM 参考手册: node.nodeName 属性
