在开发工具中检查之前无法选择的元素

Question

令人着迷的情况。

我试图通过类名称来选择元素，仅通过在Chrome Dev Tools控制台中键入即可。我可以看到要选择的元素，它们在页面上可见。我要等待3秒钟以上的时间才能加载页面，然后直接进入开发控制台并输入：

document.getElementsByClassName("example");
>> HTMLCollection []

然后，我右键单击有问题的元素，然后单击“检查”。然后，我返回控制台并输入：

document.getElementsByClassName("example");
>> HTMLCollection [div.example.row]

所以现在元素就在那里！但是当检查元素时，除了将鼠标悬停在元素上之外，我在开发工具中什么也没做。有人可以帮助解释这个谜吗？非常感谢。

如果有任何解释，我正在使用Quovo。这是一个演示：https://youtu.be/lPcIYupa2kY。

Answer 1

我发现在这种情况下，问题实际上是相关元素在iframe中。在此处遇到此问题：SecurityError: Blocked a frame with origin from accessing a cross-origin frame。

Answer 2

您所描述的实际上并不是所有的“令人着迷”。这实际上仅是了解控制台如何报告值的问题。

键入时：

document.getElementsByClassName("example");

控制台将通过报告该语句的返回值进行响应。 getElementsByClassName()返回节点列表（也称为HTML集合），这就是控制台向您显示的内容：

HTMLCollection []

元素始终存在。如果要输入：

document.getElementsByClassName("example")[0];

控制台将报告该特定DOM元素。而且，如果您输入：

document.getElementsByClassName("example").length;

控制台将报告该集合中的元素数量。

但是，当您检查一个元素时，您是在告诉控制台您只对一个元素感兴趣，并且尽管每个供应商的开发工具的构建方式都不同，但它们都将显示所检查对象范围内的内容。元件。因此，当您返回到控制台并再次尝试代码时，您将获得与以前相同的集合，但是被检查的项占据了中心位置。

本质上，这全都归结为知道如何解释控制台输出。

并不是在一种情况下已经准备好DOM，在另一种情况下也没有准备好。

如果您要设置一个DOMContentLoaded事件处理程序并在其中尝试代码，则会发现代码一直都能正常工作。