javascript - 遍历 HTMLCollection

Question

我有一个 HTMLCollection，其中包含所有使用 script 标签的 HTML 节点。我收集它们const scriptNodes = document.getElementsByTagName('script');。

如果我在 Chrome 开发工具中记录整个集合，它的长度是10. 如果我展开集合并查看它的属性，我可以看到超过 10 个。我什至可以看到一个名为 的属性length，即 12。这意味着有 2 个属性无法访问。

我尝试访问scriptNodes[10], scriptNodes[11]，但它们是未定义的。即使 APIHTMLCollection.nodeItem(index)返回未定义，但它们不是，我可以看到那些“额外”属性的内容。

我试过for..of, for..in了，但没有记录。

我应该如何访问那些额外/未定义的属性？这与可枚举性有关吗？

谢谢！

Answer 1

许多浏览器扩展可以将脚本标签添加到您的页面。我猜这就是那些额外的脚本标签出现的原因。您可能在加载额外标签之前的某个时间点访问脚本标签。如果将代码放在 setTimeout 中，您可能会获得所有脚本节点。试试看，让我们知道是不是这样。

$(document).ready(function () {
    setTimeout(function () {
        var scriptNodes = document.getElementsByTagName('script');
        console.log('scriptNodes', scriptNodes);
    }, 2000); // or an even longer delay if you like
});