为什么不能按正向顺序删除样式？

Question

我修改了以下SO帖子中的问题/答案，以正向顺序删除样式。

问题/答案会以相反的顺序删除脚本。

它不起作用。但是，如果我将其更改为逆序，那么事情就会奏效。

我的猜测是，如果您删除style[0]，那么style[1]会立即更新为样式[0]，在一个示例中只有两种样式。因此循环会失败。

这是对的吗？

样式数组是否在修改后立即更新？

Reference Post

var scripts  = document.getElementsByTagName("script");
for (var i=scripts.length; i--; ){
   (scripts[i]).parentNode.removeChild(scripts[i]);
}

Answer 1

你的猜测是正确的; getElementsByTagName会返回 live “数组”（实际上不是数组，而是NodeList或HTMLCollection，具体取决于浏览器和版本）更新DOM。

所以，你可以写：

var styles = document.getElementsByTagName("style");
while (styles.length) {
    styles[0].parentNode.removeChild(styles[0]);
}

那就是说，没有理由喜欢这种方式。由于JavaScript在绘制UI的同一个线程中运行，因此删除样式的结果将在循环完成后才会生效，因此顺序对您无关紧要。

有用的MDN链接：

• element.getElementsByTagName
• NodeList
• HTMLCollection

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/API/element.getElementsByTagName：

  

元素是找到的元素按其出现在子树中的顺序的实时NodeList（但请参见下面的注释）。如果未找到任何元素，则NodeList为空。

因此，只要删除元素[0]，元素[0]就会填充元素[1]，从而删除元素[1]（除非有元素[2]）。

您可以像这样以“正常”顺序执行此操作（尽管由于重复测试scripts.length而不是高效）：

var scripts  = document.getElementsByTagName("script");
while (scripts.length) {
    (scripts[0]).parentNode.removeChild(scripts[0]);
}