短くてシンプル：探している要素がドキュメントに（まだ）存在しないため。
この回答の残りのために私が使用するgetElementById一例として、しかし同様に当てはまりgetElementsByTagName、querySelector選択要素こと、および任意の他のDOM方法。
考えられる理由
要素が存在しない理由は2つあります。
渡されたIDの要素は実際にはドキュメントに存在しません。渡しgetElementByIdたIDが（生成された）HTMLの既存の要素のID と実際に一致し、IDのスペルに間違いがないこと（IDでは大文字と小文字が区別されます！）を再確認する必要があります。
ちなみに、実装とメソッドを実装している現代のブラウザの大部分では、CSSスタイルの表記法を使用して要素を要素ごとに取得しています。たとえば、要素が要素によって取得されるのではなく、最初の文字は必須で、2番目の文字は要素が取得されない原因になります。querySelector()querySelectorAll()iddocument.querySelector('#elementID')iddocument.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がロードされていることを確認してください。
これは、対応するDOM要素の後にJavaScriptを置くだけで確実にできます。
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
この場合、コードをbodyの終了タグ（</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:or https:スキームを追加する、パスを調整するなど）。
load/ DOMContentLoaded イベントをリッスンすることは、まさにjQueryが.ready() [ドキュメント]で行っていることです。DOM要素に影響を与えるすべてのjQueryコードは、そのイベントハンドラー内にある必要があります。
実際、jQueryチュートリアルでは明示的に次のように述べています。
jQueryを使用するときに行うほとんどすべてのことは、ドキュメントオブジェクトモデル（DOM）の読み取りまたは操作を行うため、DOMの準備ができたらすぐにイベントなどの追加を開始する必要があります。
これを行うには、ドキュメントの準備完了イベントを登録します。
$(document).ready(function() {
// do stuff when DOM is ready
});
または、省略構文を使用することもできます。
$(function() {
// do stuff when DOM is ready
});
どちらも同等です。