您的位置:首页> 前端教程> JS教程
文章导航

JavaScript lastChild

2018-9-2 01:06| 作者: admin| 查看: 2727| 评论: 0|来自: 蚂蚁部落

此属性可以返回指定节点的最后一个子节点。

如果元素下没有子节点,那么返回null。

特别说明:

(1).子节点并不一定都是元素节点,还有可能包含文本、注释等节点。

(2).标准浏览器中,空格或者换行被看做文本节点。

后面会通过代码实例进行相关演示。

语法结构:

[JavaScript] 纯文本查看 复制代码
elementNode.lastChild

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript">  
window.onload=function(){ 
  var bt=document.getElementById("bt");
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  bt.onclick=function(){
    oshow.innerHTML=obox.lastChild.nodeType;
  }
} 
</script>  
</head>  
<body>  
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

上述代码可以获取box元素下最后一个子节点的类型,并将其写入div中。

具有一定的浏览器兼容性问题,分析如下:

(1).在IE9+和其他标准浏览器中,div显示数字3,说明是文本节点。

(2).在IE8和IE8以下浏览器中,div显示数字1,说明是元素节点。

因为在标准浏览器中,会将空格和换行看做是文本节点,而低版本IE浏览器则无视空格或者换行。

以当前的软硬件水平,其实在一定程度上可以无视低版本IE浏览器。

如果实在要兼容可以使用如下类似代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript">  
window.onload=function(){ 
  var bt=document.getElementById("bt");
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  bt.onclick=function(){
    var lastNode=obox.lastChild;
    while(lastNode.nodeType!=1){
      lastNode=lastNode.previousSibling;
    }
    oshow.innerHTML=lastNode.innerHTML;
  }
} 
</script>  
</head>  
<body>  
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

绝大多数时候需要无视空格或者换行,上面就是一段能够实现此功能的代码。

原理比较简单,就是使用循环遍历的手段,找到最后一个节点类型为1的节点。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部