问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
251419392
    6193110192

    如果把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>
    javascript
    阅读 4.9k
    1 个回答
    得票最新
    头像
    ishowman
      268110
      ✓ 已被采纳

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

      在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我又老了一岁

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题