JavaScript Element lastChild 属性

• 

  JavaScript Element lastChild 方法

  lastChild属性返回指定节点的最后一个子节点，作为Node对象。此属性是只读的。此属性与lastElementChild之间的区别在于lastChild将最后一个子节点作为元素节点，文本节点或注释节点（取决于哪个节点）返回，而lastElementChild将最后一个子节点作为元素节点返回（忽略文本和评论节点）。

  注意：元素内的空格被视为文本，文本被视为节点（请参阅“更多示例”）。

  提示：使用element.childNodes属性可返回指定节点的任何子节点。

  提示：要返回指定节点的第一个子节点，请使用firstChild属性。

  实例：

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

  var x = document.getElementById("myList").lastChild.innerHTML;
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  lastChild	支持	支持	支持	支持	支持

• 

  语法

  node.lastChild
• 

  技术细节

  项目	描述
  返回值：	Node对象，表示节点的最后一个子节点; 如果没有子节点，则为null
  DOM版本	Core Level 1

• 

  更多例子

  在这个例子中，我们演示了空格如何与这个属性进行交互。获取<div>元素的最后一个子节点的节点名称：

  <!-- 
  元素内的空格被视为文本，文本被视为节点
  在此示例中，在< p>之前有空格，在< span>之前 在< span>之后
  因此，< div>的最后一个子节点 是#text节点，而不是< span> 你期望的元素
  -->
  
  <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参考：node.firstChild 属性

  HTML DOM参考：node.childNodes 属性

  HTML DOM参考：node.parentNode 属性

  HTML DOM参考：node.nextSibling 属性

  HTML DOM参考：node.previousSibling 属性

  HTML DOM参考：node.nodeName 属性