                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

想依次输出被删除内容，结果是undefined，错在哪？

<h1>javascript</h1>

<h1>jquery</h1>

</div>

function clearText() {

var content=document.getElementById("content");

// 在此完成该函数

for(var i=0;i<content.childNodes.length;i++){

var x=content.removeChild(content.childNodes[i]);

document.write("被移除的内容是："+x.innerHTML+"<br>"); //这一句的问题在哪里？？？？

}

</script>

运行结果：

被移除的内容是：undefined

慕瓜4462994

2018-09-17

源自：JavaScript进阶篇 9-14

关注问题我要回答

891

操作

收起

3 回答

PaulPierce
2019-01-03

for(var i=0;i<content.childNodes.length;i++) 你应该从后面的元素的删除起, 而不是前面.

0 回复有任何疑惑可以回复我~

收起回答

qq_长剑Zlf古风君疯狂剑客_03964233
2018-10-14

我也被这个难到了

0 回复有任何疑惑可以回复我~

收起回答

慕瓜4462994 提问者
2018-09-17

自答。

因为在Chrome，Firefox等浏览器看来，HTML代码写在一行和分多行是有区别的，上述HTML部分实际上存在空节点，如图片：

空节点是不具有innerHTML属性，其次在循环的同时，数组的长度在改变，这就难以得到正确结果。

正确做法之一是，将非空节点存在新数组中，然后处理新数组元素：

<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
var childArr = content.childNodes;

//筛选出元素节点(新数组里不再有空节点)
var eleNodeArr = new Array();
for(var i=0;i<childArr.length;i++){
    if(childArr[i].nodeType==1){
        var x = eleNodeArr.push(childArr[i]);//将元素节点存入新数组
    }
}

//   依次删除元素节点
    for (var i=0;eleNodeArr.length; i++) {
            var y = content.removeChild(eleNodeArr[i]);
            document.write("被删除的内容为："+y.innerHTML+"<br>");//注意，这里不能用eleNodeArr[i]代替y
        }
  }
  </script>
  <button onclick="clearText()">清除节点内容</button>

1 回复有任何疑惑可以回复我~

收起回答

专注程序不可自拔

你好,看了你的代码,很好奇var x = eleNodeArr.push(childArr[i]);这一句将筛选完的数组存到x中,为什么下面不使用x呢

2018-10-24 回复有任何疑惑可以回复我~

PaulPierce 回复专注程序不可自拔

push 方法返回的是数组长度. 所以x是长度. 没啥用.

2019-01-03 回复有任何疑惑可以回复我~