使用 DOM 方法删除图像元素

removing images elements using DOM method

本文关键字：图像元 元素 图像 删除 DOM 方法 使用      更新时间：2023-09-26

谁能解释为什么 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();
}

有两件事让我担心该代码：

  1. remove是一种相对较新的 DOM 方法，没有得到很好的支持。为了获得更好的支持，请使用img.parentNode.removeChild(img);

  2. getElementsByTagName返回一个实时NodeList，因此当您从列表开头删除元素时，所有其他元素都会向上移动。因此，如果列表有 5 个条目，并且您删除了 i=0 元素，则所有其他元素都会移动，现在有一个新的 i=0 元素（长度为 4 ）。您的循环将移动到i=1，因此 i=0 处的元素（以前位于 i=1 处）不会被处理。

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

    所有现代浏览器以及 IE8 都支持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：

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);
}
相关文章：