javascript - 控制台显示 getElementsBy 的不同输出...导致 Array.prototype.slice.call 在浏览器刷新时失败

Question

这个问题已经有答案了:

Is Chrome’s JavaScript console lazy about evaluating objects? (7 个回答)

Why does jQuery or a DOM method such as getElementById not find the element? (7 个回答)

已关闭 3 年前。

我正在编写一个函数来收集所有 anchor 元素并为它们编写监听器。如果我刷新浏览器(Mac 上最新版本的 Chrome 和 Firefox)，有时元素集合的显示方式会有所不同，并导致我对 Array.prototype.slice 的调用返回空数组。

function toArray(arr) { return Array.prototype.slice.call(arr); }

let anchors = toArray(document.getElementsByTagName('a'));
for (var i = 0; i < anchors.length; i++) 
{ 
    anchors[i].addEventListener('click', clicked, false); 
}
console.log(document.getElementsByTagName('a'));
console.log(anchors);

正常工作时(添加监听器)，控制台如下所示:

但是当我刷新浏览器时，大多数时候它看起来像这样:

如果我展开数组输出，它看起来像这样:

为什么它们有时会不同？有没有办法始终得到正确的结果？

Answer 1

您的脚本应等待页面加载完成，然后再调用 getElementsByTagName。否则，许多 a 元素可能尚未加载，并且 getElementsByTagName 将无法检索它们。

因此，将代码包装在 onload 事件处理程序中，例如:

onload = function() {
    let anchors = toArray(document.getElementsByTagName('a'));
    for (var i = 0; i < anchors.length; i++) 
    { 
        anchors[i].addEventListener('click', clicked, false); 
    }
    console.log(document.getElementsByTagName('a'));
    console.log(anchors);
}