Javascript 无法用循环正确替换DOM中的元素

我想用当前DOM中的class

img replace

by

img

元素替换

div

元素。但问题是，我只有class

img replace

的两个div元素，而一个

img

元素的计数是三个

我有一个循环，必须用

img

替换元素

div

，如果

images.length>divs.length

，则会停止该功能。但它并没有发生，而且我的循环在这里也不起作用（在浏览器中，它使用随机替换结果）

我将感谢你的帮助

附言。

div

和

img

元素的计数可以是随机的，因此需要动态自适应函数

函数onLoad（）{
var images=document.body.getElementsByTagName（'img'）；
var divs=document.body.getElementsByClassName（'img-replace'）；
for（设i=0；idivs.length）返回；
divs[i]。替换为（此）；
};
images[i].onerror=function（）{
log（“错误”+this.src）；
这个。删除（）；
返回；
};
}
}
onLoad（）
.img替换{
浮动：左；
边框：1px纯黑；
}

谷歌
雅虎！
宾

我更改了您的声明。我这样做的原因是，除了从
getByClassName
和
getByTagName
返回的
HTMLCollection
之外，迭代任何东西都更容易。这是因为他们的原型没有任何可移植（循环）方法。相反，我们将使用
querySelectorAll
，它返回一个
NodeList
，其原型允许我们使用
forEach
方法。这在以后的脚本中很有用

此外，我们可以使用
Math.min
获得两个长度之间的最小整数

      var most = Math.min(images.length, divs.length);

这会将您的声明更改为如下所示：

  var images = document.body.querySelectorAll('img');
  var divs = document.body.querySelectorAll('.img-replace');
  var most = Math.min(images.length, divs.length);

  var images = document.body.querySelectorAll('img'),
  divs = document.body.querySelectorAll('.img-replace'),
  most = Math.min(images.length, divs.length);

仅供参考，您还可以按如下方式列出您的申报代码：

  var images = document.body.querySelectorAll('img');
  var divs = document.body.querySelectorAll('.img-replace');
  var most = Math.min(images.length, divs.length);

  var images = document.body.querySelectorAll('img'),
  divs = document.body.querySelectorAll('.img-replace'),
  most = Math.min(images.length, divs.length);

然后我们可以在数组上循环，直到
i
，因为我们保证有那么多的图像和div

  for (let i = 0; i < most; i++) {
    images[i].onload = function() {
    divs[i].replaceWith(this);
    };

注意：Fat箭头是ES6的一部分，forEach并不总是实现的-通常IE没有及时采用完整的EcmaScript语法，因此如果您希望在该平台上使用它，只需将代码更改为ES5即可：

        for ( var i = 0; i < images.length; i++ ) {
          var image = image[ i ];
          image.onerror = function() {
            console.log( "Error " + this.src );
            this.remove();
            return;
          }
        } );


谷歌
雅虎！
宾

是否有过div多于图像的情况？div和图像的顺序是否相同？是第一个/第二个/第三个/。。。div始终是第一个/第二个/第三个/。。。图像？@Andreas由于替换顺序必须是DOM中某个元素的顺序，如果图像多于div，是否应删除备用图像？“……允许我们使用forEach方法”不是所有浏览器都支持的。@Andreas solid point。更新。我通常不再为IE操心了，所以我总是忘记那个。@zfrisch感谢您提供了一个很好的解决方案！您的声明和使用
Math.min
正确计算
img
和
div
元素的最小值-完美！我想特别感谢你对每一步的精彩解释！干杯！：）