用removeChild删除节点时，三种方法得到的结果为何不同
以下三种方法，希望大家帮忙解释下，另外，如果大家有好的方法，也可以指点一下，感谢，具体代码如下：
<!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>
可通过 x 操作
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
//法一,只一次性清除h1节点内容
for(var i=0;i<content.childNodes.length;i++){
if(content.childNodes[i].nodeType!=1){
continue;
}else{
content.removeChild(content.childNodes[i]);
}
}
//法二,一次性清除节点内容
//for(var i=content.childNodes.length-1;i>=0;i--){
// content.removeChild(content.childNodes[i]);
//}
//法三,多次清除节点内容，
//for(var i=0;i<content.childNodes.length;i++){
// content.removeChild(content.childNodes[i]);
//}
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>
year1233浏览 3368回答 2
2回答
-
stone310
法一我注释说明了，法二和法三拎出来说下，法二，for(var i=content.childNodes.length-1;i>=0;i--){先说说这种写法发生了什么，当你点击触发，i的值是content.childNodes.length-1，条件是只要i>=0，就可以执行语句，因此这里i能执行到i=0；因此这种写法下点击按钮所有节点全部删除法三：for(var i=0;i<content.childNodes.length;i++){点击触发，i开始是0，条件是i要小于元素节点的个数，就是这里发生了问题，i=0；length=11，执行语句删除节点，继续i=1；length=10，执行语句删除节点，继续i=2；length=9，执行语句删除节点，继续i=3；length=8，执行语句删除节点，继续i=4；length=7，执行语句删除节点，继续i=5；length=6，执行语句删除节点，继续i=6；length=5，条件不满足，停止！再次点击，i=0 ; length=5............因此多次点击删除节点法一注释：（childNodes下的节点包括元素节点和文本节点，上面<h1>就是元素节点，用nodeType时返回1；‘’可通过 x 操作‘’和一些空白的连接处是文本节点，用nodeType时返回-1；）function clearText() { var content=document.getElementById("content"); // 在此完成该函数 //法一,只一次性清除h1节点内容 for(var i=0;i<content.childNodes.length;i++){ if(content.childNodes[i].nodeType!=1){ //如果childNodes[i]不是元素节点 continue; //跳过，不操作 }else{ content.removeChild(content.childNodes[i]); //从content里删除childNodes[i]，保证只删除元素节点 } } //法二,一次性清除节点内容 //for(var i=content.childNodes.length-1;i>=0;i--){ // content.removeChild(content.childNodes[i]); //} //法三,多次清除节点内容， //for(var i=0;i<content.childNodes.length;i++){ // content.removeChild(content.childNodes[i]); //} }看到这里，问你个问题，为什么法一也用i++这种方式写，但却可以一次性就删除所有元素节点，而不像法三那样多次点击才能清除，能理解这个问题就能真正理解了这三种方法了具体使用看情况，一般不用法三，法一和法二都挺有实际操作性的，另外，如果想达到法一的需求，只删除元素节点，可以用children代替childNodes，children是只判断出元素节点而不管文本节点但使用for方法必须是减法
随时随地看视频慕课网APP
相关分类
JavaScript