迭代HTMLCollection

Question

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

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

我尝试访问scriptNodes[10], scriptNodes[11]并且未定义。即使API HTMLCollection.nodeItem(index)返回undefined，它们也不是，我可以看到那些＆＃39; extra＆＃39;的内容。属性。

我尝试了for..of, for..in，但未记录这些内容。

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

谢谢！

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
});