Javascript：无法使用 getElementById 获取元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12340871/
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
Javascript: Can't get element using getElementById
提问by htaidirt
Ok. I need fresh eyes because I'm still on this s***d problem for one hour!
行。我需要新鲜的眼睛，因为我仍然在这个该死的问题上待了一个小时！
Here is my simple HTML code (testssio.html) that include javascript script:
这是我包含 javascript 脚本的简单 HTML 代码 (testssio.html)：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
</script>
</head>
<body>
<div id="ssio"></div>
</body>
</html>
But it doesn't work! Using the debugger, I get:
但它不起作用！使用调试器，我得到：
Uncaught TypeError: Cannot set property 'html' of null /testssio/:6
Does anyone get it? I know it's not the correct place to look for debugging help, but I'll be crazy if I don't get it! So please, any help?
有没有人得到它？我知道这不是寻找调试帮助的正确地方，但如果我不明白，我会发疯的！所以请问有什么帮助吗？
Tahnks in advance.
提前谢谢。
回答by Travis J
The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document.
这样做的原因是头部中的脚本在呈现页面之前加载。这意味着您的内容尚未呈现，因此不是document.
If you want to see this work, try moving your script below the element renders, like this:
如果您想看到这项工作，请尝试将您的脚本移动到元素渲染下方，如下所示：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
A more standardized way of doing this is with events. Many people use jQuerybut it can be done with plain js. This would mean changing your script like this:
一种更标准化的方法是使用事件。许多人使用jQuery，但它可以用普通的 js 来完成。这意味着像这样更改您的脚本：
<script type="text/javascript">
function WinLoad() {
var ssio = document.getElementById('ssio');
ssio.innerHTML = "It finally works!";
}
window.onload = WinLoad;
</script>
This way you can still leave it in the <head>.
这样你仍然可以把它留在<head>.
Also, using .htmlis from jQuery. It is generally used as .html(content). If you want to use the plain javascript version use .innerHTML = content.
此外， using.html来自jQuery。它通常用作.html(content). 如果您想使用纯 javascript 版本，请使用.innerHTML = content.
I mention jQuery so much because it is a highly used API. This quote is from their site:
我之所以提到 jQuery，是因为它是一个使用率很高的 API。这句话来自他们的网站：
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
jQuery 是一个快速而简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，以实现快速的 Web 开发。jQuery 旨在改变您编写 JavaScript 的方式。
回答by jfriend00
Your code is running too early before the DOM is loaded and thus document.getElementById()doesn't find the element in the document yet.
您的代码在加载 DOM 之前运行得太早，因此document.getElementById()尚未在文档中找到该元素。
You can either move your script tag down to right before the </body>tag or you can wait for the DOM to load before running your code with either the window onload event or a DOMReady event.
您可以将脚本标记向下移动到</body>标记之前，也可以在使用窗口 onload 事件或 DOMReady 事件运行代码之前等待 DOM 加载。
回答by rationalboss
There are two errors here. First, you need to put the SCRIPT tag after the element. Second, it's not .html, but .innerHTML. So here is the corrected code:
这里有两个错误。首先，您需要将 SCRIPT 标记放在元素之后。其次，它不是 .html，而是 .innerHTML。所以这是更正后的代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
回答by Nudier Mena
you can use something like this
你可以使用这样的东西
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.onload= function(){
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
}
</script>
</head>
<body>
<div id="ssio"></div>
