javascript - 为什么这会导致浏览器选项卡崩溃？

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

因为您从 getElementsByTagName 返回的 NodeList(我想他们现在称它为 HTMLCollection)是事件的。因此，当您向文档添加新的 a 时，浏览器会将其添加到您正在循环访问的列表中。由于每次循环都添加另一个，因此您永远不会到达循环的末尾。

如果你想要一个断开连接的数组或集合，你可以这样做:

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

或

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

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