Javascript JS getElementById仅在inspect元素之后可见

我有一个奇怪的行为，我有一个基于存储在数据库中的HTML在主屏幕中呈现的代码

如果我在Chrome inspector的控制台中执行

getElementById（'myGivenId'）

，我会得到

null

。然而，当我单击inspect元素（屏幕上的任何位置）并再次尝试获取元素后，它出现了

如何在默认情况下使元素“可查找”

守则第2节：

<div class="hidden popupbox" data-contentid="666">
    <iframe width="16" height="9" src="//www.youtube.com/embed/...modestbranding=1" autohide="1"
                                frameborder="0" allowfullscreen="" class="video" id="myGivenId"></iframe>
</div>

---

执行

document.getElementById（'myGivenId'）

有几件事会导致这种情况：

• 无效HTML，某些标记未关闭或类似
• 重复ID
• 您试图通过ID获取的元素可能是由脚本动态创建的

---

他们是否有显示的css属性：无
在单击并显示它们之前？如果是这样，它们将不在DOM中，您无法使用getElementById获取它们
如果是这种情况，试着用Visibility:hidden替换它，如果这对你的应用没有问题的话
或者在类更改后添加getElementById以显示内容

---

但是更多的信息/代码片段将非常有用
当iframe的src来自另一个域时，您无法从iframe内部获取元素，因为由于同源策略，您将无法访问iframe中的内容

---

如果它来自同一来源，您可以使用

contentWindow

获取元素，我也遇到了同样的问题
我试图检查验证字段是否未定义或是否有文本值。 关键是，如果我在控制台中执行不同的操作，我会得到相同的结果，但是如果我在浏览器中检查元素，它看起来正在刷新某些内容，我会得到正确的值。如果你检查图片，我得到了不同的值，而不涉及工作流应用程序中的任何内容

---

我认为，为了真正帮助您，我们可能需要您的完整页面。因为这是有意义的。我也有同样的问题，通过react加载iframe，我无法仅在检查后获取元素。如果不复制id，则应通过“document.getElementById（'myGivenId'）”获取对象。因为您只访问iframe，而不是在其元素内部。如果您需要进一步尝试，只需删除“隐藏”CSS类并尝试。他们不会尝试进入iframe内部，

id=“myGivenId”

位于

iframe

元素上，而该元素本身就是文档的一部分，因此无需同源策略干预即可访问。