1

I've created a content script that does the following:

  var stuff = document.getElementsByClassName("actual-log");
  console.log(stuff);
  console.log(stuff[0]);
  console.log(stuff.length);

I get the following output:

HTMLCollection []0: div.actual-log1: div.actual-log2: div.actual-log3: div.actual-log4: div.actual-log5: div.actual-log6: div.actual-log7: div.actual-log8: div.actual-log9: div.actual-log10: div.actual-log11: div.actual-log12: div.actual-log13: div.actual-log14: div.actual-log15: div.actual-log16: div.actual-log17: div.actual-log18: div.actual-log19: div.actual-log20: div.actual-log21: div.actual-loglength: 22__proto__: HTMLCollection
main.js:4 undefined
0

This output seems totally impossible to me. In the first line it is clear that a bunch of results were returned, and that the HTMLCollection that is returned clearly has length 22. The subsequent lines are totally inconsistent with this.

What is going on here?

user1034520
  • 63
  • 5
  • HTMLCollection means it's a dynamic collection, re-populated **on access**, that is, when you expand it later in the console. – wOxxOm Feb 08 '18 at 05:28
  • Hi, can you execute the same in console of the page ? – jasmin_makasana Feb 08 '18 at 06:20
  • 1
    Possible duplicate of [Chrome displays different object contents on expand](https://stackoverflow.com/questions/42031634/chrome-displays-different-object-contents-on-expand) – wOxxOm Feb 08 '18 at 07:52

1 Answers1

1

What you experience is that getElementsByClassName returns a DynamicNodeList, meaning it is live and changes to the DOM will be automatically reflected in the collection.

In contrast, using querySelectorAll will return a StaticNodeList, which is like a snapshot of the DOM at the time the query took place. Any changes that happens after the query will no be reflected in the collection it returns.

holmberd
  • 2,393
  • 26
  • 30