javascript - 在循环结构中将元素附加到 DOM

Question

加载页面后，我想为页面上的每个现有元素附加一个附加元素。

我试过这样的:

    var divs=document.getElementsByTagName('div');

    for(i=0;i<divs.length;i++){
        newDiv=document.createElement('div');
        divs[i].appendChild(newDiv);
    }

只是一个警告，这实际上会卡住浏览器，因为 divs 变量是动态的，每次循环时 divs.length 会变得越来越大。

有没有一种方法可以在 DOM 第一次正常加载并有机会静态处理元素时确定标签的数量。

到目前为止，我还没有其他解决方案。

非常感谢。丹尼斯!

Answer 1

问题是 DOM 集合是 live , 当底层文档结构改变时，它会自动反射(reflect)在集合上，这就是为什么当 length 属性被访问时它会包含一个新的长度，一个常见的方法是 缓存 开始循环前的长度:

var divs=document.getElementsByTagName('div');

for(var i = 0, len = divs.length;i<len;i++){
    var newDiv = document.createElement('div');
    divs[i].appendChild(newDiv);
}

_{另请注意，您应该使用 var 语句声明所有变量，否则它可能会变成全局变量。}

编辑:在这种情况下，由于您附加的是相同标签名称的子节点，集合将被修改，索引将不再匹配，在第一次迭代，索引 1 将引用上一次迭代中的 newDiv 对象，如 @Casey建议在遍历之前将集合转换为普通数组会更安全。

我使用以下函数:

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

//...
var divs = toArray(document.getElementsByTagName('div'));
//...