HTML DOM Element lastChild 属性

定义和用法

lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

lastChild 属性是只读的。

注意

lastChild 返回的是这些子节点：元素节点、文本节点或注释节点。

元素之间的空白也是文本节点。

替代方案：

lastElementChild 属性 - lastElementChild 属性返回最后一个子元素（忽略文本和注释节点）。

另请参阅：

childNodes 属性

firstChild 属性

nextSibling 属性

previousSibling 属性

节点属性

parentNode 属性

nodeName 属性

nodeType 属性

nodeValue 属性

HTML 节点与元素

在 HTML DOM（文档对象模型）中，HTML 文档是拥有（或没有）子节点的节点集合。

节点指的是元素节点、文本节点和注释节点。

元素之间的空白也是文本节点。

而元素只是元素节点。

子节点与子元素

childNodes 返回子节点（元素节点、文本节点和注释节点）。

children 返回子元素（而非文本和注释节点）。

firstChild 与 firstElementChild

firstChild 返回第一个子节点（元素节点、文本节点或注释节点）。元素之间的空白也是文本节点。

firstElementChild 返回第一个子元素（不返回文本节点和注释节点）。

lastChild 与 lastElementChild

lastChild 返回最后一个子节点（元素节点、文本节点或注释节点）。元素之间的空白也是文本节点。

lastElementChild 返回最后一个子元素（不返回文本节点和注释节点）。

实例

例子 1

返回 <ul> 元素的最后一个子节点的 HTML 内容：

document.getElementById("myList").lastChild.innerHTML;

亲自试一试

例子 2

获取 <select> 元素的最后一个子节点的文本：

let text = document.getElementById("mySelect").lastChild.text;

亲自试一试

例子 3

此例演示了空格的干扰，尝试获取 "myDIV" 的最后一个子节点的节点名：

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>

<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

亲自试一试

例子 4

但是，如果您从源中删除空格，则 "myDIV" 中没有 #text 节点：

<div id="myDIV"><p>First child</p><p>Last Child</p></div>

<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

亲自试一试

语法

element.lastChild

或

node.lastChild

返回值

类型 描述
节点 节点的最后一个子节点。
null 如果无子。

浏览器支持

element.lastChild 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持