为何移除DOM中iframe的循环需两次调用iframes[i]？能否简化？

嘿，这个问题问得相当到位，我来给你逐个拆解清楚：

1. 为什么循环里要两次调用iframes[i]？ #

这是因为我们要完成两个不同的操作：

• 第一次调用iframes[i]是为了获取当前要删除的iframe元素，进而拿到它的父节点（parentNode属性）——毕竟只有父元素才有资格删除自己的子元素。
• 第二次调用iframes[i]是把这个iframe元素作为参数传给父节点的removeChild()方法，明确告诉父元素“要删掉的就是这个子元素”。

简单说就是：先找爹，再告诉爹要把哪个孩子送走～

2. 为什么不能用removeChild(iframes[i])这种简化写法？ #

因为removeChild()不是全局函数，它是DOM元素的专属方法，必须由要删除元素的父节点来调用。如果直接写removeChild(...)，JavaScript引擎会在全局环境里找这个函数，但全局环境根本没有它，结果就是直接报错。

打个比方：你要让班主任把某个学生移出班级，得先找到这个学生的班主任（父节点），再跟班主任说“把XX学生移走”（调用班主任的removeChild方法并传入学生），而不是对着空气喊“把XX移走”——空气可管不了这事😅

3. 有没有办法只调用一次iframes[i]避免重复？ #

当然有！最直接的方式就是把iframes[i]存到一个变量里，后续直接用变量就行：

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

如果你的项目不需要兼容特别老的浏览器（比如IE9及以下），还有更简洁的写法：用现代的for...of循环，甚至直接调用元素的remove()方法——这个方法是ES6之后新增的，元素可以自己把自己从DOM里移除，连父节点都不用找了：

const iframes = document.querySelectorAll('iframe');
for (const iframe of iframes) {
  iframe.remove();
}

这种写法不仅避免了重复调用，代码可读性也更高。

内容的提问来源于stack exchange，提问作者Osi