简短而简单：因为您要查找的元素在文档中不存在（目前）。
对于这个答案的其余部分，我将使用 getElementById 作为示例，但同样适用于 getElementsByTagName、querySelector 和任何其他选择元素的 DOM 方法。
可能的原因
元素可能不存在的三个原因：
-
具有传递 ID 的元素在文档中确实不存在。您应该仔细检查您传递给 getElementById 的 ID 是否确实与（生成的）HTML 中现有元素的 ID 匹配，并且您没有 拼写错误 ID（ID 是 case-敏感！）。
如果您使用的是getElementById，请确保您仅提供元素的 ID（例如，document.getElemntById("the-id")）。如果您使用的方法接受 CSS 选择器（例如 querySelector），请确保您在 ID 前包含 # 以表明您正在查找 ID（例如，document.querySelector("#the-id")）。您必须不将# 与getElementById 一起使用，并且必须将其与querySelector 和类似的一起使用。另请注意，如果 ID 中包含在 CSS identifiers 中无效的字符（例如 .；id 包含 . 字符的属性是不好的做法，但有效），您必须在以下情况下转义这些字符使用querySelector (document.querySelector("#the\\.id"))) 但在使用getElementById (document.getElementById("the.id")) 时不使用。
-
元素不存在目前你调用getElementById。
-
该元素不在您正在查询的文档中，即使您可以在页面上看到它，因为它位于 iframe（它自己的文档）中。 iframes 中的元素在您搜索包含它们的文档时不会被搜索。
如果问题是原因 3（它位于 iframe 或类似名称中），您需要查看 iframe 中的文档，而不是父文档，可能通过获取 iframe 元素并使用其 @ 987654325@ 属性以访问其文档（仅限同源）。这个答案的其余部分解决了前两个原因。
第二个原因——它还没有——很常见。浏览器从上到下解析和处理 HTML。这意味着在 DOM 元素出现在 HTML 中之前发生的对 DOM 元素的任何调用都将失败。
考虑以下示例：
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
div 出现在script 之后。在执行脚本的那一刻，该元素尚不存在，getElementById 将返回null。
jQuery
这同样适用于所有带有 jQuery 的选择器。如果您拼错了选择器，或者您试图在它们实际存在之前选择它们，jQuery 将找不到元素。
一个额外的转折是当你没有找到 jQuery 时，因为你已经加载了没有协议的脚本并且是从文件系统运行的：
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
此语法用于允许脚本通过 HTTPS 在协议为 https:// 的页面上加载，并在协议为 http:// 的页面上加载 HTTP 版本
它有一个不幸的副作用是尝试加载 file://somecdn.somewhere.com... 失败
解决方案
在调用getElementById（或任何与此相关的 DOM 方法）之前，请确保您要访问的元素存在，即 DOM 已加载。
这可以通过简单地将你的 JavaScript 放在相应的 DOM 元素来确保
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
在这种情况下，您还可以将代码放在结束正文标记 (</body>) 之前（在执行脚本时所有 DOM 元素都可用）。
其他解决方案包括监听load [MDN] 或DOMContentLoaded [MDN] 事件。在这些情况下，将 JavaScript 代码放在文档中的哪个位置并不重要，您只需记住将所有 DOM 处理代码放在事件处理程序中。
例子：
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
有关事件处理和浏览器差异的更多信息，请参阅articles at quirksmode.org。
jQuery
首先确保 jQuery 已正确加载。 Use the browser's developer tools 查找是否找到了 jQuery 文件，如果没有则更正 URL（例如，在开头添加 http: 或 https: 方案，调整路径等）
监听load/DOMContentLoaded 事件正是jQuery 对.ready() [docs] 所做的事情。所有影响 DOM 元素的 jQuery 代码都应该在该事件处理程序中。
事实上，jQuery tutorial 明确指出：
由于我们在使用 jQuery 时所做的几乎所有操作都会读取或操作文档对象模型 (DOM)，因此我们需要确保在 DOM 准备好后立即开始添加事件等。
为此，我们为文档注册一个就绪事件。
$(document).ready(function() {
// do stuff when DOM is ready
});
您也可以使用简写语法：
$(function() {
// do stuff when DOM is ready
});
两者是等价的。