猿问

为什么获取到的最后一个子元素是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>


宝慕林4294392
浏览 570回答 1
1回答

喵喵时光机

在js中，换行符、空格这些也是文本节点。lastChild在这里获取的是就是换行符，所以是undefined可以改用lastElementChild。&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oSp1=document.getElementsByClassName("sp1");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i=0;i<oSp1.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oSp1[i].onclick=function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this.parentNode.parentNode.lastElementChild.innerHTML); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}lastElementChild获取的永远是元素节点当然你也可以用原来的lastChild。改一下html就行了（去掉换行符）<div&nbsp;class="div1">&nbsp;&nbsp;&nbsp;&nbsp;<span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span></span><span></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span&nbsp;class="sp1">获取</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>小明</span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答