javascript - 在删除子节点的上下文中使用 JavaScript for 循环时出现意外输出

Question

下面给出的是我的 HTML 和两个 JavaScript 循环结构(for 和 while)。执行时，while 循环按预期工作，但 for 循环似乎不像 while 循环那样在循环中执行。必须重新运行 for 循环代码，直到删除所有子节点。

使用for循环:

var article = document.getElementsByTagName("article")[0];
for (var i = 0; i < article.childNodes.length; i++) {
  article.removeChild(article.childNodes[i]); //even you can replace i with 0 (zero)
}

<header>
  <h1>An Introduction to JavaScript</h1>
  <p>Removing Elements</p>
</header>

<article>

  <p id="p1">My <strong>first</strong> paragraph.</p>

  <p id="p2">My <strong>second</strong> paragraph.</p>

</article>

使用while循环:

var article = document.getElementsByTagName("article")[0];
while (article.childNodes.length) {
	article.removeChild(article.childNodes[0])
}

<header>
  <h1>An Introduction to JavaScript</h1>
  <p>Removing Elements</p>
</header>

<article>

  <p id="p1">My <strong>first</strong> paragraph.</p>

  <p id="p2">My <strong>second</strong> paragraph.</p>

</article>

这里的 for 循环发生了什么？

Answer 1

如果从 childNodes 集合的开头删除一个条目，集合会立即根据 child 不再存在的事实进行调整，因此索引 1 处的元素现在位于索引 0 处、索引 2 移至索引 1，等等。正如您所期望的，length 也会动态更新。

由于您不断增加i，因此您最终会跳过所有其他元素:删除 0，这会将其他元素向下移动；然后删除 1，这会将其他节点向下移动，等等。在您的示例中，您最终会删除文本节点而不是元素。发生的情况如下:

首先，您的 article 元素中包含以下内容:

0: Text node containing whitespace1: `p` element2: Text node with whitespace3: `p` element4: Text node with whitespace

The loop with i == 0 removes the first one, leaving us with:

0: `p` element1: Text node with whitespace2: `p` element3: Text node with whitespace

...and i is now 1. Then the next iteration removes the node at index 1, leaving is with:

0: `p` element1: `p` element2: Text node with whitespace

...and i is now 2. Then the next iteration removes the node at index 2:

0: `p` element1: `p` element

...and i is now 3, length is now 2, and the loop stops.

To use the for loop, loop backward

for (var i = article.childNodes.length - 1; i >= 0; i--) {
    article.removeChild(article.childNodes[i]);
} 

var article = document.getElementsByTagName("article")[0];
for (var i = article.childNodes.length - 1; i >= 0; i--) {
  article.removeChild(article.childNodes[i]);
}

<header>
  <h1>An Introduction to JavaScript</h1>
  <p>Removing Elements</p>
</header>

<article>

  <p id="p1">My <strong>first</strong> paragraph.</p>

  <p id="p2">My <strong>second</strong> paragraph.</p>

</article>

另请参阅:What is the best way to empty an node in JavaScript及其答案。