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仍会更新（即变小），但这无关紧要，因为您仅在开始时使用它，而不是在迭代过程中使用。 因此，您不会遭受这种“怪癖”的困扰。