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

为什么只能删除前三个

<!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++){ 
  content.removeChild(content.childNodes[0]);
  
  }
 
}
</script>

<button onclick="clearText()">清除节点内容</button>



</body>
</html>

木白123

2016-03-23

源自：JavaScript进阶篇 9-14

关注问题我要回答

611

操作

收起

2 回答

慕码人8934913
2016-03-26

function clearText() {
var content=document.getElementById("content");
for(i=0;i<content.childNodes.length;i++)
{
var x=content.removeChild(content.childNodes[i]);
}
}

我使用的浏览器会把空白字符算作子节点，用1-6来表示，
<div id="content">1
<h1>html</h1>2
<h1>php</h1>3
<h1>javascript</h1>4
<h1>jquery</h1>5
<h1>java</h1>6
</div>
因此第一次点击按钮，
删除第child[0]后，1被删除
<h1>html</h1>变为child[0],
2变为child[1],第二次把child[1]删除，也就是2
for循环以此类推，会先把1-6空白字符删除，之后便停止，因为child.length会随着删除动态改变，以至于不能一次删除
同理，第二次点击按钮会把html、javascript、java三个先删除，最后点击一次删除一个。

解决方法：把child.length赋值给l,l并不会动态改变，并总是删除第一个child[0]或最后一个child[child.length-1],一次性把全部子节点删除