以下三种方法，希望大家帮忙解释下，另外，如果大家有好的方法，也可以指点一下，感谢，具体代码如下：<!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>
2 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
法一我注释说明了，法二和法三拎出来说下，
法二，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方法必须是减法
添加回答
举报
0/150
提交
取消