GetElementById 在使用 window.onload 时返回 null，但在从控制台运行时不返回

Question

我试图通过 id 在我的网站中找到一个 div，但是当我从 window.onload 调用 getElementById 时，我得到了一个 null 返回。我已经验证我正在寻找的元素存在并且它没有与任何其他元素共享 Id。

奇怪的是，当我从 chrome 的开发人员工具运行控制台命令时，div 会按原样返回。

我在 JSFiddle 上提供了一个简化版本的链接，以及我正在尝试的内容的简要展示，并希望您能提供任何意见。

<script>
    var hasElement = document.getElementById('someId');
    alert(hasElement);
</script>
<div id="someId">true</div>

http://jsfiddle.net/ph9Nc/2/

Answer 1

问题是你需要改变这个：

window.onload=urlFinder();

对此：

window.onload=urlFinder;

</body>或者您可以在相关 HTML 之后调用您的函数。

您立即调用该函数，然后将返回结果分配给，window.onload而不是将函数引用分配给window.onload。请记住，无论何时使用()，都意味着立即执行它。任何时候只要分配函数名称，就意味着分配对函数的引用，稍后当某人选择应用于()变量时可以调用该函数。

另外，您的 jsFiddle 不是有效的测试，因为整个小提琴设置为等待 window.onload 触发（在左上角），这可能会让您更加困惑。

这是 jsFiddle 的修复版本（某些代码中也有 JS 错误）：http://jsfiddle.net/jfriend00/3H9vu/

Answer 2

您尝试获取的 DOM 元素尚不存在

div您正试图在将其写入页面之前获取它。脚本标记会立即执行，除非您明确告诉它等待。

您有两个选择：

将脚本放在 HTML 后面

<div id="someId">true</div>
<script>
    var hasElement = document.getElementById('someId');
    alert(hasElement);
</script>

告诉脚本在加载事件时执行

有了基本的 JavaScript...

<script>
window.onload = function(){
    var hasElement = document.getElementById('someId');
    alert(hasElement);
}
</script>
<div id="someId">true</div>

...或者使用 jQuery...

<script>
$(document).ready(function(){
    var hasElement = $('#someId');
    alert(hasElement);
});
</script>
<div id="someId">true</div>

更新：

或者，在大多数现代浏览器中，您可以使用script 标记上的async或defer属性来避免默认的同步阻塞行为。

关于控制台：

控制台将记录对对象最后状态的引用，而不是在脚本中调用它时的状态。请参阅这篇文章的解释：/sf/answers/517242421/