javascript - 从 DOM 中移除 HTMLCollection 元素

Question

我有一个段落元素的集合。有些是空的，有些只包含空格，而有些则有内容:

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p></p>
<p> </p>
<p>    </p>
<p>&nbsp;</p>
<p> &nbsp;</p>

我正在使用 getElementsByTagName 来选择它们:

var paragraphs = document.getElementsByTagName('p');

这将返回文档中的所有段落。我想删除所有这些，所以我想运行

for (var i = 0, len = paragraphs.length; i < len; i++) {
   paragraphs[i].remove();
}

但我收到 Uncaught TypeError: Cannot read property 'remove' of undefined 错误。我觉得这很奇怪，但我想我会尝试添加一个守卫，看看会发生什么:

for (var i = 0, len = paragraphs.length; i < len; i++) {
   paragraphs[i] && paragraphs[i].remove();
}

没有错误，但没有删除所有元素。所以我再次运行它，它删除了 一些 之前没有删除的元素。我再次运行它，最后所有段落都从文档中删除。

我想知道我在这里遗漏了什么明显的细节。

Demo of the problem

Answer 1

问题是 paragraphs 是一个事件列表。通过删除 p 元素，您还更改了该列表。一个简单的解决方法是以倒序遍历列表:

for (var i = paragraphs.length - 1; i >= 0; --i) {
  paragraphs[i].remove();
}

另一种解决方案是创建一个静态列表(非实时列表)。您可以通过以下任一方式执行此操作:

• 将列表转换为 Array :

  var paragraphs =
    Array.prototype.slice.call(document.getElementsByTagName('p'), 0);
  

• 使用 document.querySelectorAll :

  var paragraphs = document.querySelectorAll('p');
  

然后您可以按常规顺序遍历列表(使用 for 循环):

for (var i = 0; i < paragraphs.length; ++i) {
  paragraphs[i].remove();
}

或(使用 for...of 循环):

for (var paragraph of paragraphs) {
  paragraph.remove();
}

请注意，.remove 是一种相对较新的 DOM 方法，并非所有浏览器都支持。查看MDN documentation了解更多信息。

---

为了说明问题，假设我们有一个包含三个元素的节点列表，paragraphs = [p0, p1, p2]。那么当你遍历列表时会发生这样的事情:

i = 0, length = 3, paragraphs[0] == p0  => paragraphs = [p1, p2]
i = 1, length = 2, paragraphs[1] == p2  => paragraphs = [p1]
i = 2, length = 1, END

所以在这个例子中，p1 没有被删除，因为它被跳过了。