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