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

Question

我想更换一个 div类 img-replace 的元素通过 img当前 DOM 中的元素。但问题是，我只有两个类为 img-replace 的 div 元素。而 img 的计数元素 - 三个。

我有一个必须替换元素的循环 div通过 img以及如果 images.length > divs.length 将停止功能的条件.但这并没有发生，而且我的循环在这里不起作用(在浏览器中它使用随机替换结果)。

如果有任何帮助，我将不胜感激。

附言div 的计数和 img元素可以是随机的，所以需要动态自适应功能。

function onLoad() {
  var images = document.body.getElementsByTagName('img');
  var divs = document.body.getElementsByClassName('img-replace');

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

    images[i].onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    };
  }
}

onLoad();

.img-replace {
  float: left;
  border: 1px solid black;
}

<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
  <span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>

<div style="width:101px;height:40px;font-size:32px" class="img-replace">
  <span style="color:purple">Yahoo!</span>
</div>

<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>

<hr>

<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="http://toplogos.ru/images/logo-yahoo.jpg" width="114" height="40" alt="Yahoo">
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="No file (bing)">

Answer 1

我更改了您的声明。我这样做的原因是迭代除 HTMLCollection 以外的任何东西都更容易。这是你从 getByClassName 返回的内容和 getByTagName .这是因为它们的原型(prototype)没有附加任何可迭代(循环)方法。相反，我们将使用 querySelectorAll返回 NodeList ，其原型(prototype)允许我们使用 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);

然后我们可以遍历数组直到 i < most因为我们保证有那么多图像 和 div。

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

然后我们遍历我们的 images使用 forEach我们的 NodeList 提供的方法并添加 onerror对每幅图像起作用。

    images.forEach(image => image.onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    });
  }
}

注意:Fat Arrows 是 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;
          }
        } );

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

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

    images.forEach(image => image.onerror = function() {
      console.log("Error " + this.src);
      this.remove();
      return;
    });
  }
}

onLoad();

.img-replace {
  float: left;
  border: 1px solid black;
}

<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
  <span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>

<div style="width:101px;height:40px;font-size:32px" class="img-replace">
  <span style="color:purple">Yahoo!</span>
</div>

<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>

<hr>

<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="http://toplogos.ru/images/logo-yahoo.jpg" width="114" height="40" alt="Yahoo">
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="No file (bing)">