javascript - 为什么获取到的最后一个子元素是undefined?

查看:129
本文介绍了javascript - 为什么获取到的最后一个子元素是undefined?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

如果把lastChild去掉的话可以弹出整个祖父的内容 也可以看到小明的那个就是最后一个子元素 但是为什么加上lastChild后就是undefined的了?我就是想获取小明的那一个节点

<html>
<head>
<meta charset="utf-8">
<style>
   .sp1{width:50px;height:50px;}
</style>
<script type="text/javascript"> 
   window.onload=function(){
       var oSp1=document.getElementsByClassName("sp1");
       for(var i=0;i<oSp1.length;i++){
          oSp1[i].onclick=function(){
            alert(this.parentNode.parentNode.lastChild.innerHTML);
          }
       }
    }
</script>
</head>
<body>
<div class="div1">
  <span>
      <span></span><span></span><span></span>
      <span>
         <span></span><span class="sp1">获取</span>
      </span>
      <span>小明</span>
  </span>
</div>
</body>
</html>

解决方案

今天上来提问的和回答的,我猜都是单身狗=_=

在js中,换行符、空格这些也是文本节点。lastChild在这里获取的是就是换行符,所以是undefined

  • 可以改用lastElementChild。

    var oSp1=document.getElementsByClassName("sp1");
       for(var i=0;i<oSp1.length;i++){
          oSp1[i].onclick=function(){
            console.log(this.parentNode.parentNode.lastElementChild.innerHTML);
          }
       }

lastElementChild获取的永远是元素节点

  • 当然你也可以用原来的lastChild。改一下html就行了(去掉换行符)

<div class="div1">
    <span>
          <span></span><span></span><span></span>
          <span>
             <span></span><span class="sp1">获取</span>
          </span>
          <span>小明</span></span>      
</div>

最后祝大家元旦快乐。md我又老了一岁

这篇关于javascript - 为什么获取到的最后一个子元素是undefined?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆