短くて単純：探している要素がドキュメントに（まだ）存在しないためです。
この回答の残りの部分では例を使用しますが、、、、および要素を選択するその他のDOMメソッドにも同じgetElementByIdことが当てはまります。getElementsByTagNamequerySelector
考えられる理由
要素が存在しない理由は3つあります。
渡されたIDを持つ要素は、実際にはドキュメントに存在しません。渡すgetElementByIdIDが（生成された）HTMLの既存の要素のIDと実際に一致していること、およびIDのスペルを間違えていないことを再確認する必要があります（IDでは大文字と小文字が区別されます！）。
を使用している場合は、要素のIDのみgetElementByIdを指定していることを確認してください（例：） 。CSSセレクター（など）を受け入れるメソッドを使用している場合は、IDを探していることを示すためにIDの前に必ずインクルードしてください（例：）。withを使用してはならず、 withおよび同様のものを使用する必要があります。また、IDにCSS識別子で無効な文字が含まれている場合（たとえば、文字を含む属性は不適切ですが有効です）、（））を使用する場合はエスケープする必要がありますが、 （）を使用する場合はエスケープする必要があります。 。document.getElemntById("the-id")querySelector#document.querySelector("#the-id")#getElementByIdquerySelector.id.querySelectordocument.querySelector("#the\\.id")getElementByIddocument.getElementById("the.id")
呼び出した時点では、要素は存在しませんgetElementById。
iframe要素は（独自のドキュメントである）にあるため、ページに表示されていても、クエリしているドキュメントには含まれていません。の要素は、iframesそれらを含むドキュメントを検索するときに検索されません。
問題が理由3（または類似のもの）である場合は、おそらく要素を取得し、そのプロパティを使用してそのドキュメントにアクセスすることにより、親ドキュメントではなく、iframe内のドキュメントを調べる必要があります（同一生成元のみ）。この回答の残りの部分では、最初の2つの理由について説明します。iframeiframecontentDocument
2番目の理由-まだそこにはありません -は非常に一般的です。ブラウザはHTMLを上から下に解析して処理します。つまり、そのDOM要素がHTMLに表示される前に発生するDOM要素の呼び出しは、失敗します。
次の例を考えてみましょう。
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
の後にdiv表示されます。スクリプトが実行された時点では、要素はまだ存在しておらず、を返します。scriptgetElementByIdnull
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の準備ができたらすぐにイベントなどの追加を開始する必要があります。
これを行うために、ドキュメントの準備完了イベントを登録します。
$(document).ready(function() {
// do stuff when DOM is ready
});
または、省略構文を使用することもできます。
$(function() {
// do stuff when DOM is ready
});
どちらも同等です。