Javascript document.getElementByID 外部还是内联？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10048025/
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
document.getElementByID external or inline?
提问by Roq Savage
I have been trying to use the document.getElementByIDto pull information from an HTML file from an external JS file and it does not seem to be working. Does the document.getElementByIDonly work if it is inline with the HTML file or can it work properly on an external JS file? The JS file is called upon within the HTML document properly because other functions are working.
我一直在尝试使用document.getElementByID从外部 JS 文件的 HTML 文件中提取信息，但它似乎不起作用。是否document.getElementByID只有工作，如果它是内嵌在HTML文件或可以在一个外部JS文件正常工作？JS 文件在 HTML 文档中被正确调用，因为其他功能正在运行。
回答by Matt Ball
Does the document.getElementByID only work if it is inline with the HTML file
document.getElementByID 是否仅在与 HTML 文件内联时才有效
No.
不。
can it work properly on an external JS file?
它可以在外部 JS 文件上正常工作吗？
Yes.
是的。
You're probably calling document.getElementById()before the DOM is ready.
您可能document.getElementById()在 DOM 准备好之前调用。
回答by jfriend00
First off, make sure you're using document.getElementById("xxx"), not document.getElementByID("xxx")(note the difference in capitalization at the end). Your question refers to document.getElementByID("xxx")so that could be the problem right here.
首先，请确保您使用的是document.getElementById("xxx"), 不是document.getElementByID("xxx")（注意最后的大小写差异）。你的问题指的是document.getElementByID("xxx")这可能是这里的问题。
Second, you must make sure that the function is executed AFTER the relevant DOM items have been parsed by the browser. If you are putting the document.getElementByIdin an external JS file that is loaded in the <head>section and is executed immediately after it loads, then the DOM will not yet be ready.
其次，您必须确保在浏览器解析相关 DOM 项之后执行该函数。如果您将document.getElementById放入在该<head>部分中加载并在加载后立即执行的外部 JS 文件中，则 DOM 还没有准备好。
You have several options:
您有多种选择：
1)Place the external JS file <script>tags at the end of the body, right before the </body>tag. This will not only load/display your page faster, but will guarentee that the DOM is parsed before anything in that JS file can run.
1)将外部 JS 文件<script>标签放在正文的末尾，就在</body>标签之前。这不仅可以更快地加载/显示您的页面，而且可以保证在该 JS 文件中的任何内容可以运行之前解析 DOM。
<body>
Your HTML here
<script type="text/javascript" src="myscript.js"></script>
</body>
2)Since you have jQuery, put your immediately executed code inside of a $(document).ready(fn)block so that jQuery will hold back the execution until the DOM is ready. If you do it this way, then you can put your code anywhere (including in the <head>section if you want).
2)因为你有 jQuery，把你立即执行的代码放在一个$(document).ready(fn)块中，这样 jQuery 就会阻止执行，直到 DOM 准备好。如果你这样做，那么你可以把你的代码放在任何地方（<head>如果你愿意，包括在这个部分）。
$(document).ready(function() {
// put your page initialization code here
});
3)Put your code anywhere you want, but don't have any of it execute immediately. Instead, put all your initialization code in an intialization function (let's call it myPageInit()that you call from:
3)将您的代码放在您想要的任何位置，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（让我们称之为myPageInit()您调用的函数：
$(document).ready(myPageInit);
4)Put your code anywhere you want, but don't have any of it execute immediately. Instead, put all your initialization code in an intialization function (let's call it myPageInit()that you call from a script right before the the </body>tag with this:
4)将您的代码放在您想要的任何位置，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（让我们称之为myPageInit()您在</body>标签之前从脚本中调用的函数：
<script type="text/javascript">myPageInit()</script>
回答by Lucas
My suggestion is to do this:
我的建议是这样做：
window.onload = function () {
// document.getElementById() code here
}
Then your document.getElementById()would not execute until every element on the page has fully loaded.
然后document.getElementById()在页面上的每个元素都完全加载之前不会执行。
回答by Niet the Dark Absol
If you put the script in the <head>then the body hasn't loaded yet and so the elements aren't there.
如果您将脚本放在 中，<head>则主体尚未加载，因此元素不存在。
Either defer the script by using jQuery's functions, or put the script at the end of the body.
要么使用 jQuery 的函数推迟脚本，要么将脚本放在正文的末尾。
