18

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

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

元素 1:

在此处输入图像描述

要素 2:

在此处输入图像描述

问题是:

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

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

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

在此处输入图像描述

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

在此处输入图像描述

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

我该如何解决?我需要遍历孩子,但它不会让我因为长度显然是 0。

提前致谢!所有帮助表示赞赏。

4

1 回答 1

40

当您将对象记录到控制台时,对象的当前状态不会被快照和显示(如您所料);相反,控制台会获得对该对象的实时引用。在控制台中展开它时,您会看到展开时的内容而不是登录时的内容。有关此问题及其答案的更多信息。

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

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

工具提示说

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


但一般来说:与其在黑暗中用console.log手电筒绊倒,我建议使用浏览器和/或 IDE 中内置的调试器打开灯。

于 2016-07-29T14:06:44.880 回答