javascript - element.children 的 console.log 显示长度为 0，但稍后展开时有 3 个条目

Question

这个问题已经有答案了:

console.log() shows the changed value of a variable before the value actually changes (7 个回答)

已关闭 4 个月前。

在我的 JavaScript 中，我有两个元素。

我已经记录了这两个元素，它显示以下内容:

元素 1:

元素 2:

问题是:

• 当我 console.log每个元素的子元素 ( element.children ) 显然会返回一个元素列表。
• 但奇怪的是，有一个元素是空的(长度为 0)，但展开后却有 3 个元素(长度为 3)。

如果您阅读下面的元素子元素日志，您就会明白我在说什么......

元素 1(该元素按预期工作):

元素 2(有问题的元素):

有谁知道这里发生了什么吗？ child 的数量怎么可能出现相互矛盾的报道？

我该如何解决这个问题？我需要遍历 children ，但它不允许我，因为长度显然是 0。

提前致谢!感谢所有帮助。

Answer 1

当您将对象记录到控制台时，对象的当前状态不会被快照和显示(正如您所期望的那样)；相反，控制台会获取对象的实时引用。当您在控制台中展开它时，您会看到展开时的内容，而不是您登录时的内容。有关更多信息，请参阅 this question and its answers .

很明显，当您进行日志记录时，您的集合是空的，然后稍后再获取它们的元素。您只想让代码等到集合被填充。例如，如果您在脚本运行时立即执行此操作，请考虑将脚本放在文档的末尾，就在结束语 </body> 之前。标签。

对象旁边的非常微妙蓝色 (i) 图标有一个有用的工具提示；如果将其悬停，您会看到:

它表示“左侧的对象值在记录时已被快照，下面的值刚刚被评估。”

<小时/>

但一般来说:而不是在黑暗中带着 console.log 跌跌撞撞地走来走去。 torch，我建议使用浏览器和/或 IDE 中内置的调试器打开灯。