简单的JS -循环混淆

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<4 (它小于返回5的article.childNodes.length)，它就能工作。

我明白了为什么article.childNodes.length返回5，这让我感到困惑，因为我认为如果它适用于4，那么它应该适用于5。

Answer 1

这是因为您正在更改正在循环的集合。您正在从零向上循环，同时要删除子节点，这样循环的上限就会越来越低。在中间，您的循环计数器将处理不断缩小的子节点数，循环结束。

要使该循环正常工作，您需要保留子节点的初始数目：

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

但是，当还剩下任何子节点时，您可以只循环：

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

Answer 2

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

当你硬编码原来的长度，你就消除了这个问题。

如果您的目的是删除所有的子级，那么只需进行条件检查，看看是否存在.lastChild。

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

像这样的"Live“节点列表可能很棘手，所以在循环中修改它们的元素时总是需要小心的。