5回答

• 

  慕粉3951534

  2016-10-13 15:02:14

  for(var i=0;i<content.childNodes.length;i++)
    {
        
       content.removeChild(content.childNodes[i]);
        
    }

  这是你的代码，这个问题其实不难，可能你被绕进去了，一下子没出的来。

  我们这里举一个简单的例子来说明一下，假设没有空白节点且 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，说明全部删除。

  1 1

  亻亻殊途

  讲的好明白 多谢

  2016-10-13 16:59:08

  共 1 条回复 >

• 

  土豪码农

  2016-10-08 20:26:50

  上面的答案都没告诉你为什么，我看了下，大概懂了点，这样说吧，h1元素用1，2，3，4，5表示，空白文本用A,B,C,D,E,F表示，一开始排列是这样的，A1B2C3D4E5F.，然后你点第一次，for第一次循环删除了A空白文本，然后i++变成1了，这时候排列是1B2C3D4E5F，for第二次运行删除了B。第三次for的循环I=2,排列是12C3D4E5F，全部循环过后，排列只剩下12345了。空白文本都删除光了，所以你点了一下，for循环了6次，把空白文本都删除了，但是你从结果是看不出来的。然后当你点了第二次，以此类推，就把1，3，5的元素删除了。第三次点击删除了2，第四次点解删除了4.

  0 2
• 

  慕妹7508549

  2016-09-24 14:10:50

  for(var i=content.childNodes.length-1;i>=0;i--)

  0 0
• 

  慕妹7508549

  2016-09-24 14:10:20

  这个问题我也见到了，你的for从大到小循环for(var i=content.childNodes.length-1;i>=0i--)

  2 0

  慕妹7508... 回复预言家小新

  为什么从大到小我不知道，感觉应该是，删除一个后触发了什么，导致退出了脚本，可能是删除前一个node会引发界面位移，或者是重新计算空间，前一个的删除会影响后一个，但后一个的删除不会影响前一个，应该就是这个原因

  2016-10-26 08:07:35

  共 2 条回复 >

• 

  krisleo

  2016-09-24 13:43:13

  function clearText() {
  
    var content=document.getElementById("content");
  
    // 在此完成该函数
  
    for(var i=1;i<content.childNodes.length+1;i++)
  
    {
  
        
  
       content.removeChild(content.childNodes[i]);
  
        
  
    }
  
  }

  试试看
  

  0 0