在HTMLCollection上迭代

Question

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

如果我在Chrome dev tools中记录整个集合，那么它的长度是10。如果我展开集合并查看它的属性，我可以看到超过10个。我甚至可以看到一个名为length的属性，它是12。这意味着有2个属性是不可访问的。

我尝试访问scriptNodes[10], scriptNodes[11]，但它们是未定义的。即使HTMLCollection.nodeItem(index)接口返回undefined，我也能看到这些“额外”属性的内容。

我已经尝试过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
});