为什么一键删除不了呢？
安歌Moose
2016-10-09 18:20
<!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-1; i++){
if(content.childNodes.length>0){
var ch = content.childNodes[i];
content.removeChild(ch);
}
}
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>
3回答
-
- 慕粉3951534
- 2016-10-13 14:40:55
for(var i = 0; i < content.childNodes.length-1; i++){ if(content.childNodes.length>0){ var ch = content.childNodes[i]; content.removeChild(ch); } }这是你的代码，这个问题其实不难，可能你被绕进去了，一下子没出的来。
我们这里举一个简单的例子来说明一下，假设没有空白节点且 childNodes 数组中只有三个元素，
childNodes = ["html","php","java"]; // 简单举例
i = 0 时，childNodes[0] 为 html，被删除。
但这时，childNodes 数组发生了变化，变为 ["php","java"]，只剩两个元素，因为 html 被删除了。
此时，显然，childNodes 数组的 length 也发生变化，从 3 变为了 2。
i++，i = 1，第二次循环要删除的是 childNodes[1]，也就是 java，而不是 php，php 被留在了数组中，没有删除。
怎么改？方法有不少，列举几种：
第一种
for(var i=content.childNodes.length-1;i>=0;i--){ var childNode = content.childNodes[i]; content.removeChild(childNode); }给 i 赋初值为数组长度减一，也就是定位在 childNodes 数组的最后一个元素，然后每次循环 i--，从后往前删，这样虽然数组的长度一直在变化，但前面没删的元素不受影响，下标保持不变。
第二种
while (content.childNodes.length > 0) { var childNode = content.childNodes[0]; content.removeChild(childNode); }这个是判断当前 childNodes 数组中是否还有元素，如果有，就将第一个删除，不用去管删的是什么，也不用管下标，直到删光为止。
第三种
while (content.firstChild) { var node = content.firstChild; content.removeChild(node); }这和第二种方法类似，不过将 childNodes[0] 换成了 firstChild，意思一样的。就是判断当前 content 的第一个子节点，如果存在，就删除第一个子节点，继续判断，当 firstChild 返回 null，说明全部删除。
-
- 我不是林俊杰
- 2016-10-13 08:53:15
因为你删掉的同时，length的长度一直在变到后面i大于length的长度了就不会删了，for循环里面的i++删掉就行了
-
- qq_Jellybeans_0
- 2016-10-09 20:48:44
删掉 for 循环吧
JavaScript进阶篇
468190 学习 · 21891 问题
相似问题