我一直在尝试使用document.getElementByID 从外部 JS 文件中的 HTML 文件中提取信息，但它似乎不起作用。 document.getElementByID 是否仅在它与 HTML 文件内联时才有效，或者它是否可以在外部 JS 文件上正常工作？ JS 文件在 HTML 文档中被正确调用，因为其他函数正在工作。
【问题讨论】：
标签： javascript jquery html dom
首先，请确保您使用的是document.getElementById("xxx")，而不是document.getElementByID("xxx")（注意最后的大小写差异）。您的问题指的是document.getElementByID("xxx")，所以这可能就是这里的问题。
其次，您必须确保在浏览器解析相关 DOM 项之后执行该函数。如果您将 document.getElementById 放在外部 JS 文件中，该文件在 <head> 部分中加载并在加载后立即执行，则 DOM 尚未准备好。
您有多种选择：
1) 将外部 JS 文件 <script> 标签放在正文末尾，就在 </body> 标签之前。这不仅会更快地加载/显示您的页面，而且会保证在该 JS 文件中的任何内容可以运行之前解析 DOM。
<body>
Your HTML here
<script type="text/javascript" src="myscript.js"></script>
</body>
2) 由于您有 jQuery，请将您立即执行的代码放在 $(document).ready(fn) 块中，这样 jQuery 将阻止执行，直到 DOM 准备好。如果你这样做，那么你可以把你的代码放在任何地方（如果你愿意，包括在<head>部分）。
$(document).ready(function() {
// put your page initialization code here
});
3) 将您的代码放在您想要的任何地方，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（我们称它为myPageInit()，您从中调用：
$(document).ready(myPageInit);
4) 将您的代码放在您想要的任何位置，但不要立即执行任何代码。相反，将所有初始化代码放在一个初始化函数中（我们称它为 myPageInit()，您可以在 </body> 标记之前的脚本中调用它：
<script type="text/javascript">myPageInit()</script>
【讨论】：
getElementById？ 2. 为什么不window.onload=function() {// Todo};？
getElementById() 实际上比 jQuery 快一点，如果你想要的只是一个 DOM 元素。我不知道为什么 OP 不使用 jQuery。至于你的第二个问题，window.onload() 发生在所有图像加载后。 $(document).ready()发生在 DOM 在所有图像加载完成之前准备就绪，因此如果您不需要等待所有图像完成加载，它会更快发生并且更好。
document.getElementById，关于为什么不使用 jquery，好吧，我和我的同事正在从模板构建网站，他使用 jquery 而我没有。他的网站代码大约是 30kb（不包括 jquery 依赖项），而我的总共是 15kb。
var x = $("#yourid")。在它最终在内部调用document.getElementById("yourid) 并创建一个对象并返回它之前，您会看到它执行的代码行数（包括正则表达式匹配）比var x = document.getElementById("yourid) 多得多。 jQuery 在很多情况下都非常有用（尤其是跨浏览器的东西或动画的东西），但是当在普通的 javascript 中有直接的等价物时，它并不总是最快的方式。
getElementById() 比 jQuery 快 5-20 倍：jsperf.com/jquery-vs-js99。
document.getElementByID 是否仅在与 HTML 文件内联时才有效
没有。
它可以在外部JS文件上正常工作吗？
是的。
您可能在 DOM 准备好之前调用了document.getElementById()。
【讨论】：
我的建议是这样做：
window.onload = function () {
// document.getElementById() code here
}
那么你的document.getElementById() 在页面上的每个元素都完全加载之前不会执行。
【讨论】：
如果您将脚本放在<head> 中，则正文尚未加载，因此元素不存在。
要么使用 jQuery 的函数来延迟脚本，要么将脚本放在正文的末尾。
【讨论】：
window.onload = function() {
document.getElementById("demo").innerHTML = "My First JavaScript";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js in ts</title>
<script src="app.js"></script>
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
</body>
</html>【讨论】：