HTMLCollection长度与记录的对象不匹配

Question

// Find all posts
var posts = node.getElementsByClassName("userContentWrapper");
var post, text;
console.log(posts);
console.log(typeof(posts));
console.log(Object.keys(posts));
console.log(posts.length);

The above outputs:

:( I don't understand. Why is length 0? It works in a fiddle: http://jsfiddle.net/p7yfv37s/

I also printed the object again after the length, and it still shows length: 4.

Answer 1

If you put your cursor over the i icon you will see that HtmlCollection state is captured only upon first expansion. It does not show its state at the moment of console.log invocation.

Most likely logging is performed before DOM is loaded or node is dynamically populated by javascript. HTMLCollection is kind of live collection which track all DOM changes ( more info about difference between HTMLCollection and NodeList )

See simple example: http://jsfiddle.net/p7yfv37s/1/