简短：由于您要查找的元素在文档中不存在（尚未）。
对于此答案的其余部分我将使用getElementById作为例子，但是同样适用于getElementsByTagName，querySelector和任何其它DOM方法，其选择的元件。
可能的原因
元素可能不存在的原因有两个：
具有传递的ID的元素确实在文档中不存在。您应该仔细检查传递给您的ID是否getElementById确实与（生成的）HTML中现有元素的ID匹配，并且您没有拼错 ID（ID 区分大小写！）。
顺便提及，在大多数实现querySelector()和querySelectorAll()方法的当代浏览器中，CSS样式表示法用于通过其元素来检索元素id，例如：document.querySelector('#elementID')与通过其idunder 来检索元素的方法相反document.getElementById('elementID')；在第一个中，#字符是必不可少的，在第二个中，这将导致无法检索元素。
该元素不存在，此刻你打电话getElementById。
后一种情况很常见。浏览器从上到下解析并处理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
});
有关事件处理和浏览器差异的更多信息，请参见quirksmode.org上的文章。
jQuery的
首先，请确保jQuery已正确加载。使用浏览器的开发人员工具查找是否找到了jQuery文件，如果找不到，则更正URL（例如，在开头添加http:或https:方案，调整路径等）。
监听load/ DOMContentLoaded 事件正是jQuery使用.ready() [docs]所做的。您所有影响DOM元素的jQuery代码都应在该事件处理程序内。
实际上，jQuery教程明确指出：
正如使用jQuery时所做的几乎所有操作都会读取或操作文档对象模型（DOM）一样，我们需要确保在DOM准备就绪后立即开始添加事件等。
为此，我们为文档注册了一个ready事件。
$(document).ready(function() {
// do stuff when DOM is ready
});
另外，您也可以使用简写语法：
$(function() {
// do stuff when DOM is ready
});
两者是等效的。