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

IT技术 javascript html htmlcollection
2021-01-31 05:54:20

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

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

元素 1:

在此处输入图片说明

元素 2:

在此处输入图片说明

问题是:

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

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

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

在此处输入图片说明

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

在此处输入图片说明

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

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

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

1个回答

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

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

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

工具提示说“记录时对左侧的对象值进行了修改,下面的值刚刚评估过。”

它说“记录时对左侧的对象值进行了快照,下面的值刚刚评估过。”


但一般来说:与其在黑暗中拿着console.log手电筒四处走动,我建议您使用浏览器和/或 IDE 中内置的调试器打开灯

但是,我们如何获得数组的实际长度。即评估长度
2021-03-15 05:54:20
@MDM - 问题是,何时评估什么时候登录?或者稍后当您查看控制台中的对象时?如果您想要记录时的长度,请记录arr.length. 如果以后需要,在控制台中展开数组时,查看length展开后数组显示中的属性。
2021-03-15 05:54:20
@MangeshDaundkar您可以登录孩子的节点列表克隆DOM节点在呼叫的时刻二份:console.log(el.cloneNode(true).children)克隆位于文档之外(直到附加到某处)并且您将拥有对它的唯一引用,因此没有任何东西能够对其进行变异。
2021-03-20 05:54:20
谢谢您的帮助!我没有意识到这是在向 html 添加元素之前调用的(通过 jscript)
2021-03-22 05:54:20
在反应中获取 dom 元素时,我也遇到了类似的问题,然后为了解决这个问题,我使用了一个具有很小时间间隔的 setTimeout 函数,这样 dom elment 只能在渲染后访问。
2021-04-06 05:54:20