令人着迷的情况。
我试图通过类名称来选择元素，仅通过在Chrome Dev Tools控制台中键入即可。我可以看到要选择的元素，它们在页面上可见。我要等待3秒钟以上的时间才能加载页面，然后直接进入开发控制台并输入：
document.getElementsByClassName("example");
>> HTMLCollection []
然后，我右键单击有问题的元素，然后单击“检查”。然后，我返回控制台并输入：
document.getElementsByClassName("example");
>> HTMLCollection [div.example.row]
所以现在元素就在那里！但是当检查元素时，除了将鼠标悬停在元素上之外，我在开发工具中什么也没做。有人可以帮助解释这个谜吗？非常感谢。
如果有任何解释，我正在使用Quovo。这是一个演示：https://youtu.be/lPcIYupa2kY。
答案 0 :(得分：1)
我发现在这种情况下，问题实际上是相关元素在iframe中。在此处遇到此问题：SecurityError: Blocked a frame with origin from accessing a cross-origin frame。
答案 1 :(得分：0)
您所描述的实际上并不是所有的“令人着迷”。这实际上仅是了解控制台如何报告值的问题。
键入时：
document.getElementsByClassName("example");
控制台将通过报告该语句的返回值进行响应。 getElementsByClassName()返回节点列表（也称为HTML集合），这就是控制台向您显示的内容：
HTMLCollection []
元素始终存在。如果要输入：
document.getElementsByClassName("example")[0];
控制台将报告该特定DOM元素。而且，如果您输入：
document.getElementsByClassName("example").length;
控制台将报告该集合中的元素数量。
但是，当您检查一个元素时，您是在告诉控制台您只对一个元素感兴趣，并且尽管每个供应商的开发工具的构建方式都不同，但它们都将显示所检查对象范围内的内容。元件。因此，当您返回到控制台并再次尝试代码时，您将获得与以前相同的集合，但是被检查的项占据了中心位置。
本质上，这全都归结为知道如何解释控制台输出。
并不是在一种情况下已经准备好DOM，在另一种情况下也没有准备好。如果您要设置一个DOMContentLoaded事件处理程序并在其中尝试代码，则会发现代码一直都能正常工作。