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

Posted 2023-05-09

【中文标题】element.children 的 console.log 显示长度为 0，但稍后展开时有三个条目

【英文标题】：console.log of element.children shows 0 length but has three entries when expanded later

【发布时间】：2016-12-04 06:57:31

【问题描述】：

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

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

元素 1：

元素 2：

问题是：

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

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

元素 1（这个按预期工作）：

元素 2（有问题的元素）：

有人知道这里发生了什么吗？孩子的数量怎么会有相互矛盾的报道？

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

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

【问题讨论】：

能否请您创建一个jsfiddle或使相关源代码可访问。

【参考方案1】：

当您将对象记录到控制台时，对象的当前状态不会被快照和显示（如您所料）；相反，控制台会获得对象的实时引用。当您在控制台中展开它时，您会看到展开它时的内容，而不是您登录时的内容。更多信息请参见this question and its answers。

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

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

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

---

但一般来说：我建议您使用浏览器和/或 IDE 中内置的调试器打开灯，而不是在黑暗中用console.log 手电筒磕磕绊绊。

【讨论】：

感谢您的帮助！在向 html 添加元素（通过 jscript）之前，我没有意识到这是被调用的

但是，我们如何才能得到数组的实际长度。即评估长度

@MDM - 问题是，评估何时？什么时候登录？或者稍后当您在控制台中查看对象时？如果您想要记录时的长度，请记录 arr.length。如果以后需要，在控制台中展开数组时，查看展开数组的显示中的length属性。

@MangeshDaundkar 您可以记录调用时生成的 克隆 DOM 节点副本的子节点列表：console.log(el.cloneNode(true).children)。克隆存在于文档之外（直到附加到某处），您将拥有对它的唯一引用，因此没有任何东西能够改变它。

我在获取 dom 元素时也遇到了类似的问题，然后为了解决这个问题，我使用了一个时间间隔很小的 setTimeout 函数，这样 dom elment 只能在渲染后访问。