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]);

???? ?

? }

}

試試看