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

为什么我不能一次性清除所有节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>删除节点removeChild()</title>
        <style type="text/css"> button { cursor: pointer; } </style>
</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">
var content = document.getElementById("content");
var add = content.childNodes;
alert("当前DIV节点数量为：" + add.length);
for(var i = 0; i < add.length; i++) {
if(add[i].nodeType != 1) {
content.removeChild(add[i]);
};
};
alert("开始清理空白无效节点...");
alert("进度：10%");
alert("进度：25%");
alert("进度：75%");
alert("进度：100%");
alert("当前DIV有效节点数量为：" + add.length);
//alert(add.length);
function detectionText() {
// 在此完成该函数
for(var i = 0; i < add.length; i++) {
if(add[i].nodeType == 1) {
add[i].style.color = "green";
add[i].setAttribute("title", "节点正常");
};
};
//alert(add.length);
};
function clearText() {
for(var i = 0; i < add.length; i++) {
if(add[i].nodeType != 1){
continue; 
}else{
content.removeChild(add[i]);
};
};
};
function clearoneText() {
if(add[0].nodeType == 1) {
content.removeChild(add[0]);
};
};
function lengthText() {
alert("当前DIV有效节点数量为：" + add.length);
};
</script>
<button onclick="detectionText()">检测节点内容</button>
        <button onclick="clearText()">删除所有节点内容</button>
        <button onclick="clearoneText()">删除第一个节点内容</button>
        <button onclick="lengthText()">打印节点长度</button>
        <br /><br />
<span>点击检测按钮后，字体为绿色则为正常节点，鼠标移动到元素上查看是否为有效节点</span>
</body>
</html>