Question

任何人都可以解释为什么remove（）方法不能像我预期的那样工作。我想从文档中删除所有img元素。循环文档并删除所有图像，这就是我想要的但这只删除了2个图像，为什么？这是代码JSBIN

HTML

<img src="http://www.lorempixel.com/50/50" alt="pic">
<img src="http://www.lorempixel.com/50/50/animals" alt="pic">
<img src="http://www.lorempixel.com/50/50/city" alt="pic">

JS

var imgElements = document.getElementsByTagName("img"); // HTMLCollection

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

Answer 1

有两件事让我担心这段代码：

remove是一种相对较新的DOM方法，不受支持。要获得更好的支持，请使用img.parentNode.removeChild(img);
getElementsByTagName会返回直播 NodeList，因此当您从列表开头删除元素时，所有其他元素都会向上移动。因此，如果列表中有5个条目，并且您删除了i=0元素，则所有其他元素都会移动，现在有一个 new i=0元素（长度为{{1} }）。您的循环将转到4，因此i=1处的元素（以前为i=0）将无法处理。

对于非实时i=1，请使用NodeList（或者只是向后循环列表，从末尾删除）。或使用querySelectorAll('tagname')将Array.prototype.slice转换为数组。
所有现代浏览器以及IE8都支持
NodeList。

以下是使用querySelectorAll的示例：

querySelectorAll

或者只是向后计数：

var imgElements = document.querySelectorAll("img"); // HTMLCollection
for(var i=0; i<imgElements.length; i++) {
  var img = imgElements[i];
  img.parentNode.removeChild(img);
}

或使用var imgElements = document.getElementsByTagName("img"); // HTMLCollection for(var i=imgElements.length-1; i>=0; i--) { var img = imgElements[i]; img.parentNode.removeChild(img); }：

Array.prototype.slice

使用DOM方法删除图像元素

1 个答案: