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

Question

我正在编写一个函数来收集所有锚元素并为其编写侦听器。如果刷新浏览器（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);
}

Answer 2

根据来自Anis的反馈，我将代码包装在一个名为writeListeners（）的函数中，并尝试用两种不同的方式调用它：

1. 在标题中为脚本本身添加onload属性，<script onload="writeListeners();" src="file"></script>因为脚本在DOM完成之前就已加载而无法使用。

2. 文件末尾的现有DOMContentLoaded函数的一部分。 document.addEventListener('DOMContentLoaded', () => {writeListeners();});首先，此操作失败，因为尚未定义writeListeners。之所以发生这种情况，是因为包含该函数的脚本已用异步标记并在DOMContentLoaded之后加载。我删除了async标签，以确保脚本可以更早加载，现在可以正常工作。