Javascript element.children的console.log显示0长度，但在以后展开时有三个条目

在我的javascript中，我有两个元素

我已经记录了这两个元素，它显示

要素1

要素2

有问题

当I

console.log

元素

s
.children
时，它们显然返回一些
HtmlCollection
s

您将在一分钟内理解以下内容的含义：但奇怪的是，一个HtmlCollection是空的（长度为0），但有3个元素（长度为3）

如果您阅读以下元素子元素的
console.log
s，您将理解我所说的内容

元素1子元素和长度：


元素2子元素和长度：（混乱的一个）


有人知道这里发生了什么吗

如何解决这个问题，我需要通过HtmlCollection循环，但它不允许我，因为长度是0

提前谢谢！
感谢所有帮助。
当您将对象记录到控制台时，对象的当前状态不会快照并显示（如您所料）；相反，控制台会获取对象的实时引用。当您在控制台中展开它时，您会在展开它时看到它的内容，而不是在您记录它时看到它的内容。更多关于这方面的信息，请参阅

显然，当您进行日志记录并稍后获取其元素时，您的集合是空的。您只想让代码等待集合填充完成。例如，如果在脚本运行时立即执行此操作，请考虑将脚本放在文档的结尾，正好在关闭<代码> <代码>标签> 
之前。
对象旁边的非常微妙的蓝色（i）图标有一个有用的工具提示；如果将其悬停，则会看到：


它说“左边的对象值在记录时是快照的，下面的值刚刚被评估过。”


但一般来说：与其在黑暗中用
控制台.log
火炬蹒跚而行，我建议使用内置于浏览器和/或IDE中的调试器打开指示灯。
请创建JSFIDLE或访问相关源代码。谢谢帮助！在我（通过jscript）向html添加元素之前，我没有意识到这是被调用的，但是，我们如何获得数组的实际长度呢。i、 e评估length@MDM-问题是，何时评估？你什么时候登录？或者稍后在控制台中查看对象时？如果需要记录时的长度，请记录
arr.length
。如果以后需要，在控制台中展开数组时，请查看展开数组显示中的
length
属性。@MangeshDaundkar您可以记录在调用时复制的克隆DOM节点副本的子节点列表：
console.log（el.cloneNode（true.children）
。克隆存在于文档之外（直到附加到某个地方），您将拥有对它的唯一引用，因此任何东西都无法对其进行变异。在react中获取dom元素时，我也遇到了类似的问题，然后为了解决这一问题，我使用了一个具有小时间间隔的setTimeout函数，以便dom elment只能在呈现后才能访问。