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

Question

我遇到了this loop here用于使用 vanilla 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() 经常需要的冗余引用。

<小时/>

I wondered if this could be done in a shorter way without using the term iframes[i] twice, but once so there won't be an alleged "duplication".

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

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