HTML DOM 元素 lastChild
示例
返回 <ul> 元素的最后一个子节点的 HTML 内容
document.getElementById("myList").lastChild.innerHTML;
尝试一下 »
获取 <select> 元素的最后一个子节点的文本
let text = document.getElementById("mySelect").lastChild.text;
尝试一下 »
更多示例如下。
描述
lastChild
属性返回节点的最后一个子节点。
lastChild
属性返回一个节点对象。
lastChild
属性是只读的。
重要!
lastChild
返回最后一个子节点:元素节点、文本节点或注释节点。
元素之间的空格也是文本节点。
替代方案
lastElementChild
属性返回最后一个子元素(忽略文本和注释节点)。
另请参阅
节点属性
节点与元素
在 HTML DOM 术语中
节点 是所有节点(元素节点、文本节点和注释节点)。
元素之间的空格也是文本节点。
元素 仅是元素节点。
childNodes 与 children
childNodes 返回子节点(元素节点、文本节点和注释节点)。
children 返回子元素(不包括文本和注释节点)。
firstChild 与 firstElementChild
firstChild 返回第一个子节点(元素节点、文本节点或注释节点)。元素之间的空格也是文本节点。
firstElementChild 返回第一个子元素(不包括文本和注释节点)。
lastChild 与 lastElementChild
lastChild 返回最后一个子节点(元素节点、文本节点或注释节点)。元素之间的空格也是文本节点。
lastElementChild 返回最后一个子元素(不包括文本和注释节点)。
语法
element.lastChild
或者
node.lastChild
返回值
类型 | 描述 |
节点 | 节点的最后一个子节点。null 如果没有子节点存在。 |
更多示例
此示例演示了空格如何可能产生干扰
尝试获取 "myDIV" 的最后一个子节点的节点名称
<div id="myDIV">
<p>看起来像是第一个子节点</p>
<p>看起来像是最后一个子节点</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>
尝试一下 »
但是,如果您从源代码中删除空格,则 "myDIV" 中就不会有 #text 节点
<div id="myDIV"><p>第一个子节点</p><p>最后一个子节点</p></div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>
尝试一下 »
浏览器支持
element.lastChild
是 DOM 级别 1 (1998) 功能。
它在所有浏览器中都完全受支持
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |