简单的JS For循环混淆

Question

在这个例子中，我想删除所有的pararaphes。但正如你所看到的，下面的for循环并没有将它们全部删除，它仍然为我留下了第一段。 http://codepen.io/vinhnghi223/pen/jnkzh

article=document.getElementsByTagName("article")[0];

for (i=0; i<article.childNodes.length; i++) {
 article.removeChild(article.lastChild);
}

但是，如果我将代码更改为i＆lt; 4（小于article.childNodes.length），返回5，则可以正常工作。

我知道article.childNodes.length返回5的原因。它让我感到困惑，因为我认为如果它适用于4那么它应该与5一起工作。

Answer 1

这是因为.childNodes集合会在每次删除时更新。因此.length在每次迭代时都在缩小，而i正在增长。由于您要删除.lastChild，因此您将在中间结束会议，因此上半部分不会被删除。

当您对原始长度进行硬编码时，可以解决问题。

如果您打算删除所有孩子，那么只需检查条件是否存在.lastChild。

while (article.lastChild) {
    article.removeChild(article.lastChild);
}

像这样的“实时”节点列表可能很棘手，因此在循环中修改元素时总是要小心。

Answer 2

那是因为您正在更改正在循环的集合。您正在从零开始循环，同时您正在删除子节点，以便循环的上限越来越低。在中间，你的循环计数器将缩小子节点的数量，并且循环结束。

要使该循环起作用，您需要保留初始的子节点数：

var cnt = article.childNodes.length;
for (i = 0; i < cnt; i++) {
  article.removeChild(article.lastChild);
}

但是，您可以在剩余任何子节点时循环：

while (article.childNodes.length> 0) {
  article.removeChild(article.lastChild);
}