遍历HTMLCollection

Question

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

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

我尝试访问scriptNodes[10], scriptNodes[11] ，但它们未定义。 甚至API 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
});