Question

我有一个奇怪的行为，我在主屏幕上基于存储在数据库中的HTML编写了代码。

如果我在Chrome检查器的控制台中执行getElementById(‘myGivenId’)，则会得到null。但是，在单击检查元素（屏幕上的任意位置）并尝试再次获取元素之后，它就会出现。

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

代码部分：

<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')

Answer 1

当iframe的src来自另一个域时，您将无法从iframe中获取元素，因为由于同源策略，您将无法访问iframe中的内容。

如果来自相同原点，则可以使用contentWindow

来获取元素

Answer 2

有几种原因可以导致这种情况：

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

Answer 3

它们是否具有display的css属性：none;

在单击之前，它们会出现吗？如果是这样，它们将不在DOM中，并且您无法使用getElementById获得它们。

在这种情况下，请尝试将其替换为可见性：如果不引起应用程序问题，则将其隐藏。

或在类更改后添加getElementById以显示内容。

但是更多信息/代码段会有所帮助

Answer 4

我遇到了同样的问题。

我尝试检查验证字段是否未定义或是否具有文本值。关键是，如果我检查控制台执行不同的操作，我会得到相同的结果，但是如果我检查浏览器中的元素，它看起来正在刷新一些东西，我得到正确的值。如果您查看图片，我会在工作流应用程序中没有触及任何内容的情况下获得不同的值。

Console inspection

JS getElementById仅在检查元素之后可见

4 个答案: