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

怎么点击第一下没有反应，然后再点击一下删除了3个，然后再点击依次删除一个

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<h1>javascript</h1>

<h1>jquery</h1>

</div>

function clearText() {

var content=document.getElementById("content");

for(i=0;i<content.childNodes.length;i++)

{

var x=content.removeChild(content.childNodes[i]);

x=null;

}

</script>

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

天问_0004

2014-11-13

源自：JavaScript进阶篇 9-14

关注问题我要回答

15850

操作

收起

48 回答

timebank
2015-01-13

自己编就想不到这么多==

0 回复有任何疑惑可以回复我~

收起回答

Riky彩红衣
2014-12-24

唔，我也遇到这个问题，看到结尾，我懂了，谢谢。

0 回复有任何疑惑可以回复我~

收起回答

RainbowPeter
2014-12-08

有意思，子节点数组的长度是动态变化的，那看来DOM操作很耗内存资源吧？

1 回复有任何疑惑可以回复我~

收起回答

SHAP
2014-12-04

这段代码是个变值，没循环一次，都会-1

content.childNodes.length

5 回复有任何疑惑可以回复我~

收起回答

小于飞飞
2014-11-14

该任务，要注意一些问题

1. 浏览器兼容问题。

<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

content孩子节点:

ie下是5个节点，chrome等浏览器是11个节点（因为出现了空白节点，如忘记了可以看看9-11节）。

2. 不管你使用正序还是倒序删除节点，要注意在删除节点同时，content孩子节点的个数和位置也在变化。所以最好删除时正序总删除第一个，倒序总删除最后一个。

3. 可以使用for或while 循环，使用for循环时注意。

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

不要把i<content.childNodes.length做为判断条件，举例说明，IE下执行，节点个数5个，当我点一次删除按钮。

注意:5个节点分别对应下标是从0开始: 1[0] 2[0] 3[0] 4[0] 5[0]

i=0 content.childNodes.length=5 0<5 删除第一个节点后，继续循环

i=1 content.childNodes.length=4 1<4 删除第二个节点后，继续循环

i=2 content.childNodes.length=3 2<3 删除第三个节点后，继续循环

i=3 content.childNodes.length=2 3<2 不成立，所以不继续。

这也就是为什么一次删除不了所以节点。

可以把上面的代码修改下:

 function clearText() {  

 var content=document.getElementById("content");

  nodel=content.childNodes.length

  for(i=0;i<nodel;i++)  {  

      var x=content.removeChild(content.childNodes[0]);  }

   }

378 回复有任何疑惑可以回复我~

收起回答

WingMeng

看过后思路顿然明朗，腰不酸了，腿不痛了，coding也有劲了

2014-12-06 回复有任何疑惑可以回复我~

柳树

解释的赞，清晰明了。

2014-12-20 回复有任何疑惑可以回复我~

折叠幸福

老师帮忙看下为什么这么写没反应 function clearText() { var content=document.getElementById("content"); // 在此完成该函数 for(var i=content.childNodes.length;i<1;i--){ var x=content.removeChild(content.childNodes[i-1]);

2014-12-30 回复有任何疑惑可以回复我~

查看60条回复

偌颜宁
2014-11-14

如果用while循环的话，可以这么些，如下：

<script type="text/javascript">
    function clearText() {
        var content=document.getElementById("content");
        while(content.childNodes.length != 0){
            var x=content.removeChild(content.childNodes[0]);
        }
    }
</script>

20 回复有任何疑惑可以回复我~

收起回答

maccine

老师，用while循环和for循环function clearText() { var content=document.getElementById("content"); for(i=0;i<content.childNodes.length;i++) { var x=content.removeChild(content.childNodes[i]); } }为什么while可以全部删完？而for循环只能一次删除三个呀？

2015-02-06 回复有任何疑惑可以回复我~

maccine

上面那段代码复制错了，是下面这段代码。求老师帮忙解答一下 function clearText() { var content=document.getElementById("content"); for(i=0;i<content.childNodes.length;i++) { var x=content.removeChild(content.childNodes[0]); } }

2015-02-06 回复有任何疑惑可以回复我~

qq_三亚旅游摄影_0 回复 maccine

i<content.childNodes.length 第次循环是：2<3 成立删除，第4次循环是：3<2 所以就没然后了

2015-08-23 回复有任何疑惑可以回复我~

查看2条回复

偌颜宁
2014-11-14

这个是运算时候的逻辑问题，你写的循环是从上往下删除，就会产生这样一个问题，举个例子，比如一排人有5个，分别对应1，2，3，4，5，那么这个时候1号有事临时走了，那么重新排队，是不是剩下的所有序号都要往前移一位，就是原来的2号是1号，3号是2号以此类推。你写的这个循环中就有这个问题，就是删除一次以后再次循环的时候顺序就会重新排列，这个时候再删除的时候就不是删除以前的节点，而是他的下一个节点了，因此这种写法，不是最好的，可以参考一下给出的代码，或者尝试一下用while语句去写

9 回复有任何疑惑可以回复我~

收起回答

qq_A_46

那样随着位置每次的变化，每删除第一个节点之后，之后的节点又充当第一个节点。那么就只要删除第一个节点就好了吧。

2016-02-04 回复有任何疑惑可以回复我~

米虫懒得聪明回复 qq_A_46

对的，我认为也是这样

2016-07-04 回复有任何疑惑可以回复我~

稻穗陈落入梦来

正解，不过我把for循坏的I换成固定数，还是只能输出3个

2016-09-27 回复有任何疑惑可以回复我~