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

Question

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

这很奇怪的一点是，当我从chrome的Developer Tools运行一个控制台命令时，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;

或者您可以在相关HTML之后{{​​1}}之前调用您的函数。

您正在立即调用该函数，然后将返回结果分配给</body>，而不是将函数引用分配给window.onload。请记住，只要您使用window.onload，就意味着现在就执行它。无论何时只要指定函数名称，就意味着为函数分配一个引用，以便稍后当某人选择将()应用于变量时，可以调用该函数。

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

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

Answer 2

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

您正在尝试在将div写入页面之前获取该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>

<强>更新

或者，在大多数现代浏览器中，您可以使用脚本标记上的async or defer attributes来避免默认的同步阻止行为。

关于控制台：

控制台将在最后一个状态记录对象的引用，而不是在脚本中调用它时的状态。请参阅此帖子以获取解释：https://stackoverflow.com/a/7389177/2502532