Непонятный прикол с объектами

var how_many = document.getElementsByClassName("content"); console.log(how_many);
При таком коде выводится объект:
HTMLCollection []
0: div.content
1: div.content
2: div.content
3: div.content
length: 4
proto: HTMLCollection
Если же мы код меняем на следующий:
var how_many = document.getElementsByClassName("content").length; console.log(how_many);
То в консоли появляется 0.
Даже если подытожим:
var how_many = document.getElementsByClassName("content"); console.log(how_many); console.log(how_many.length);
То выводится как и тот объект, так и ноль.
Почему?

Ответ

Вот тут все понятно и правильно:

А вот то, что у Вас:

Что тоже, в общем-то, понятно и правильно.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed. ... коллекция aвтоматически обновляется, отражая изменения в документе.