JavaScript for循環無法正常工作？

Question

我編寫的“清理”函數存在問題，請參見下面的代碼，我將在下面解釋其工作原理。

clean: function (e) {
    var
            els = null,
        i = 0;

    if (e === undefined) {
        e = this.cont;
    }

    els = e.getElementsByTagName('*');

    for (i=0;i<els.length;i++) {
        if (els[i].className.search('keep') === -1) {
            e.removeChild(els[i]);
        }
    }
    return this;
},

參數e是一個dom元素（如果未提供的話）。cont也是一個在整個函數中存儲較早的dom元素，並且e默認為它。

該函數循環遍歷所有子元素，並檢查其是否沒有保留類（這顯然是做什么的），並刪除所有不匹配的元素。

一切似乎都在工作，但是我有一個包含2個圖像和2個輸入的元素，而“ keep”類卻沒有，但是變量i僅變為2且循環停止（它應該達到4並刪除所有四個元素）

任何幫助將不勝感激。

/ *更新* /

感謝@pimvb和@Brett Walker，最終的代碼效果很好。

clean: function (e) {
    var
        els = null,
        i = 0;

    if (e === undefined) {
        e = this.cont;
    }

    els = e.getElementsByTagName('*');

    i = els.length;

    while (i--) {
        if (els[i].className.search('keep') === -1) {
            els[i].parentNode.removeChild(els[i]);
        }
    }

    return this;
},

Answer 1

.getElementsByTagName函數返回一個NodeList ，它基本上是一個數組，但是是“活動的”，這意味着如果您例如刪除一個孩子，它會自動更新。 所以當迭代， els.length正在發生變化，從而導致被2時刪除2個孩子（有4 - 2 = 2左）。 刪除2個孩子后， i == 2因此循環將過早結束，達到您的期望。

為了避免這種情況並使它成為“靜態”數組，可以將其轉換為這樣的數組，該數組不會自我更新：

els = [].slice.call(e.getElementsByTagName('*')); // [].slice.call is a trick to
                                                  // convert something like a NodeList
                                                  // into a static, real array

正如Brett Walker指出的那樣，您還可以向后迭代，如下所示：

http://jsfiddle.net/pimvdb/cYKxU/1/

var elements = document.getElementsByTagName("a"),
    i = elements.length;

while(i--) { // this will stop as soon as i == 0 because 0 is treated as false
    var elem = elements[i]; // current element

    if(elem.className == "test") // remove if it should be removed
        elem.parentNode.removeChild(elem);
}

這將從最后一個元素開始。 .length仍會更新（即變小），但這無關緊要，因為您僅在開始時使用它，而不是在迭代過程中使用。 因此，您不會遭受這種“怪癖”的困擾。