Javascript 为什么 document.GetElementById 返回 null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2632137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is document.GetElementById returning null
提问by BadDayComing
I've been using document.GetElementById succesfully but from some time on I can't make it work again. Old pages in which I used it still work but things as simple as this:
我一直在成功地使用 document.GetElementById 但从一段时间以来我无法让它再次工作。我使用它的旧页面仍然有效，但事情就这么简单：
<html>
<head>
<title>no title</title>
<script type="text/javascript">
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
</script>
</head>
<body>
<div id="ThisWillBeNull"></div>
</body>
</html>
Are giving me "document.getElementById("parsedOutput") is null" all the time now. It doesnt matter if I use Firefox or Chrome or which extensions i have enabled or what headers I use for the html, it's always null and I can't find what could be wrong.
现在一直给我“document.getElementById("parsedOutput") is null”。无论我使用 Firefox 还是 Chrome，或者我启用了哪些扩展，或者我为 html 使用了哪些标头，它始终为空，我找不到可能出错的地方。
Thanks for your input =)
感谢您的输入 =)
回答by steve_c
The page is rendered top to bottom. You code executes immediately after it's parsed. At the time of execution, the div does not exist yet. You need to wrap it in an window.onload function.
页面从上到下呈现。您的代码在解析后立即执行。在执行时，div 还不存在。您需要将其包装在 window.onload 函数中。
回答by Sarfraz
Try this:
尝试这个：
<script type="text/javascript">
window.onload = function() {
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
回答by Christopher Altman
Without window.onloadyour script is never invoked. Javascript is an event based language so without an explicit event like onload, onclick, onmouseover, the scripts are not run.
没有window.onload你的脚本永远不会被调用。Javascript 是一种基于事件的语言，因此如果没有像 onload、onclick、onmouseover 这样的显式事件，脚本就不会运行。
<script type="text/javascript">
window.onload = function(){
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
Onload event:
加载事件：
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。
回答by Cheeso
Timing.
定时。
The document isn't ready, when you're getting the element.
当您获取元素时，文档尚未准备好。
You have to wait until the document is ready, before retrieving the element.
在检索元素之前，您必须等到文档准备就绪。
回答by Syntactic
The browser is going to execute that script as soon as it finds it. At that point, the rest of the document hasn't loaded yet — there isn't any element with that id yet. If you run that code afterthat part of the document is loaded, it will work fine.
浏览器将在找到该脚本后立即执行该脚本。那时，文档的其余部分还没有加载——还没有任何具有该 ID 的元素。如果在加载文档的那部分之后运行该代码，它将正常工作。
回答by Tarik
<script type="text/javascript">
window.onload += function() {
document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
}
</script>
Use +=to assign more eventHandlers to onload event of document.
用于+=为eventHandler文档的 onload 事件分配更多的s。
