使用 DOM 方法删除图像元素

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);
getElementsByTagNamereturns一个liveNodeList等当你从开头删除元素列表，所有其他人向上移动。因此，如果列表有 5 个条目，并且您删除 i=0 元素，所有其他元素都会移动，现在有一个 new i=0 元素（长度为 4).您的循环将移至 i=1，因此 i=0 处的元素（以前位于 i=1）将不会得到处理。

对于非实时 NodeList，请使用 querySelectorAll('tagname')（或者只是向后循环列表，从末尾删除）。或使用 Array.prototype.slice 将 NodeList 转换为数组。

querySelectorAll 被所有现代浏览器支持，IE8 也支持。

这是一个使用 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:

var imgElements = Array.prototype.slice.call(document.getElementsByTagName("img"));
for(var i=0; i<imgElements.length; i++) {
  var img = imgElements[i];
  img.parentNode.removeChild(img);
}

使用 DOM 方法删除图像元素

removing images elements using DOM method

javascript

dom