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，说明全部删除。

上面的答案都没告诉你为什么，我看了下，大概懂了点，这样说吧，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.

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

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

function clearText() {

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

  // 在此完成该函数

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

  {

      

     content.removeChild(content.childNodes[i]);

      

  }

}

试试看