为什么此崩溃浏览器选项卡？

Question

它不像我不能做别的，但是我很好奇：为什么这段代码会使浏览器选项卡崩溃？

var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
    var a = document.createElement("A");
    a.innerHTML = "[?]";
    a.href = links[i].href; //this is the evil line
    a.onclick = function () {
        return false;
    };
    links[i].parentNode.appendChild(a);
}

Answer 1

因为NodeList （我认为他们现在将其称为HTMLCollection ），所以您从getElementsByTagName返回的内容是live 。 因此，当您向文档中添加新的a ，浏览器会将其添加到您要遍历的列表中。 由于每次循环都添加另一个，因此永远不会到达循环的结尾。

如果您想要断开连接的数组或集合，则可以执行以下操作：

var collection = document.querySelectorAll("a");

要么

var array = Array.prototype.slice.call(document.getElementsByTagName("a"));

querySelectorAll支持所有CSS选择器。 所有现代浏览器以及IE8都支持它。 但这可能比克隆getElementsByTagName NodeList慢（这通常并不重要）。

Answer 2

Element.getElementsByTagName()返回一个实时 HTMLCollection ，这意味着每次将新的链接元素添加到页面时，链接的长度都会增加，从而导致无限循环。