javascript - 创建图像并将其附加到 div。怎么了？

Question

所以我想做的是收集页面上的图像并将它们添加到弹出的灯箱中。所以这就是我正在做的......

var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}

但是

div.appendChild(img);

不工作，它破坏了一切。我可以将其注释掉，我拥有的所有其他内容(例如，弹出灯箱)都可以正常工作，所以我知道该行有问题，但我不确定它有什么问题。所以我的问题是我在那条线上做错了什么？

Answer 1

问题是 getElementsByTagName()返回 live NodeList , which will automatically add任何与选择器匹配的新元素(在本例中为任何 img 元素)到它的集合。

因此，您将进入无限循环(因为 images 的大小每次迭代都会增加 1)。解决此问题的最简单方法(有一个重要警告)是在之前简单地缓存images 集合的大小> 你开始添加更多；

var images = document.getElementsByTagName('img');
var len = images.length;
for(var i=0;i<len;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}
// to see what happens, try alerting images.length now to see the length has changed.

但是，这假设新添加的元素将被添加到NodeList 的end；然而，当添加的元素是 DOM 中的最后一个元素时，这仅是这种情况 (通常不会是这种情况/无法保证)。

因此，您最终不得不将返回的 NodeList 复制到一个数组中，然后然后对其进行迭代；

// Create an array
var images = [];

// Copy the result of getElementsByTagName in to the array
for (var i=0, ar = document.getElementsByTagName('img');i<ar.length;i++) {
    images.push(ar[i]);
}

for(var i=0;i<images.length;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}

可以在 MDC website 上找到更详细解释这一点的不那么枯燥的文章(与 W3 规范相比!) .