javascript - 简单的 JS For 循环困惑

Question

在这个例子中，我想删除所有的段落。但正如你所看到的，下面的 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(小于 article.childNodes.length)，它会返回 5，它就可以工作。

我知道为什么 article.childNodes.length 返回 5。这让我很困惑，因为我认为如果它适用于 4，那么它也应该适用于 5。

Answer 1

这是因为 .childNodes 集合会随着每次删除而更新。因此，.length 在每次迭代中都在缩小，而 i 则在增长。由于您要删除 .lastChild，因此最终会在中间相遇，因此前半部分不会被删除。

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

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

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

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