遍历HTMLCollection

Question

I have an HTMLCollection containing all HTML nodes that use the script tag. I collect them by const scriptNodes = document.getElementsByTagName('script'); .

If I log the whole collection in Chrome dev tools, its length is 10 . If I unfold the collection and see its properties, I can see more than 10. I can even see a property called length , which is 12. This means that there are 2 properties not accessible.

I try to access to scriptNodes[10], scriptNodes[11] and they are undefined. Even the API HTMLCollection.nodeItem(index) returns undefined, which they are not, I can see the content of those 'extra' properties.

I have tried for..of, for..in and those are not logged.

How am I supposed to access those extra/undefined properties? Is that something related to Enumerability?

Thanks!

Answer 1

A number of browser extensions can add script tags to your page. I am guessing that is why those extra script tags are showing up. Possibly you are accessing the script tags at a point in time before the extra ones are loaded. If you place your code inside a setTimeout, you would likely get all of the script nodes. Try it and let us know if that is it.

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