为什么在将一种元素替换为另一种元素时,replaceChild()表现得很奇怪？

Question

我在javascript上比较新,发现了一个我今天无法解释的有趣行为.我<hr>在网站上有一个自定义(有一个图像),在IE7及以下显示奇怪.为了克服这个问题,我想replaceChild()结合使用getElementsByTag().最初,我只是试图遍历列表,所以:

var hrules = document.getElementsByTagName('hr');
for (var i=0; i < hrules.length; i++) {

   var newHrule = document.createElement("div");
   newHrule.className = 'myHr';

   hrules[i].parentNode.replaceChild(newHrule, hrules[i]);

   document.write(i);
}

但是,这不起作用:它实际上只获得了一半的元素,跳过了其他元素.打印i给出<hr>文档中实际元素数量的半整数值(例如,如果有7个<hr/>元素,则打印4个.相比之下,以下操作:

var hrules = document.getElementsByTagName('hr');
var i = 0;
while (i < hrules.length) {

   var newHrule = document.createElement("div");
   newHrule.className = 'myHr';

   hrules[i].parentNode.replaceChild(newHrule, hrules[i]);

   document.write(i);
}

i打印的次数与文档中的hrules相同(但当然总是0,因为我没有递增),并且正确更换了hrules.我认识到while这里也可能while(true)- 直到它耗尽<hr>元素,但似乎在此之后停止(它不再打印0).

我已经尝试了许多不同类型的元素,并观察到只有在用一种元素替换另一种元素时才会发生这种情况.即,替换p用div,span用p,等等.如果我取代p用p,div用div,等最初的例子可以正常工作.

我发现的文档中没有任何内容(w3schools,各种谷歌搜索,这里等)提出了一个明显的答案.

这里发生了什么？首先,为什么我提供的第二个例子工作 - 是replaceChild()自动迭代元素？其次,为什么不同类型的元素的行为不同？

Answer 1

document.getElementsByTagName是对文档中所有HR元素的实时访问 - 每当您更改文档时它都会更新.无论何时调用它,都不会获得文档中所有HR的快照.

因此,使用第一个代码,您每次都会递增i并减少hrules.length的大小.这就解释了为什么你只看到你期望的一半步骤.