想不通为什么出来的结果为什么是未定义，感觉代码并没有错
小菜鸟Holly
2016-11-04 09:59
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<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");
// 在此完成该函数
for(var i=0;i<content.childNodes.length;i++){
var x=content.removeChild(content.childNodes[i]);
document.write("被删除的节点："+x.innerHTML+'</br>');
}
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>
结果：
被删除的节点：undefined
被删除的节点：undefined
被删除的节点：undefined
被删除的节点：undefined
被删除的节点：undefined
2回答
-
- 老友丶
- 2016-11-04 14:53:08
不好意思了，妹子，第一次回答得太草率了。你使用是对了的，不过你忽略了一个细节。我的代码是这样的：
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
for(var i=(content.childNodes.length-1);i>=0;i--){
var x= content.removeChild(content.childNodes[i]);
document.write("被删除的节点："+x.innerHTML+'</br>');
}
}
</script>
这样其实就知道问题所在了：
第一：子节点中包含文本节点，而且是空文本节点，也就是里面的undefined。
第二：就是删除的时候，我们推荐从后删除，原因
子节点：[文本（0），元素（1），文本（2），元素（3）.......] i=0；
删除第一个文本节点之后，i=1，子节点就是这样的：
子节点：[元素（1），文本（2），元素（3），.....]
这是又删除了一个文本节点，其实元素节点一个都没有删除掉。所以你看到的都是undefined。
从后面删除就不会出现这种问题。
这次应该好了，嘻嘻~
-
- 老友丶
- 2016-11-04 13:07:37
var x=content.removeChild(content.childNodes[i]);
document.write("被删除的节点："+x.innerHTML+'</br>');
你这里x是一个方法的返回值啊，就是content调用removeChild方法之后返回值，所以你看到是undefined。
我才你大概是想看节点内容吧。
var x=content.removeChild(content.childNodes[i]);
document.write("被删除的节点："+content.childNodes[i].innerHTML+'</br>');
这样子就好了。
JavaScript进阶篇
468062 学习 · 21891 问题
相似问题