JavaScript:为什么要在一个循环中定位两次迭代来删除 DOM 中的所有 iframe 元素

Question

我在这里遇到了这个循环，用于使用原版 JS 删除 DOM 中的所有iframe元素：

var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}

在循环的最后一行中，为什么作者两次针对iframes变量持有的集合的迭代？

换句话说，为什么语法是iframes[i].parentNode.removeChild(iframes[i]);的，而不是像伪代码removeChild(iframes[i])这样更简单的东西？

我想知道是否可以以更短的方式完成此操作，而无需使用术语iframes[i]两次，但一次，这样就不会有所谓的"重复"。

对不起，如果我写的任何内容看起来很荒谬。

Answer 1

因为如果你只有子节点，你需要它两次。 你需要：

parent.removeChild(child)

但是，如果你没有父级，那么你必须从孩子那里得到父级，child.parentNode如下：

child.parentNode.removeChild(child);

代码中iframes[i]的位置是child。

---

请注意，更详细的代码版本可能更明显：

var iframes = document.querySelectorAll('iframe');
var child, parent;
for (var i = 0; i < iframes.length; i++) {
child = iframes[i];
parent = child.parentNode;
parent.removeChild(child);
}

---

注意：在现代浏览器中，您可以执行以下操作：

child.remove()

在您的代码中，哪个将是：

iframes[i].remove()

添加它正是为了防止.removeChild()经常需要的冗余引用。

---

我想知道是否可以在不两次使用术语 iframes[i] 的情况下以更短的方式完成此操作，但一次这样就不会有所谓的"重复"。

在现代浏览器中，可以这样做：

var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].remove();
}