<h2 id="%EF%BC%91%EF%BC%8Edomcontentloaded%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8Edomcontentloaded%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" aria-hidden="true"></a> １．DOMContentLoadedイベントとは</h2>
・①～③の処理が完了し、画面操作が可能になった段階で自動的に発生するイベントです。 
　　①．ブラウザが<code>HTML</code>ファイルを読み込む 
　　②．読み込んだ<code>HTML</code>ファイルの内容を基に、<code>DOM</code>ツリーを構築（構文解析） 
　　③．<code>&lt;script defer src="…"&gt;</code> や <code>&lt;script type="module"&gt;</code> で定義されたJSファイルの実行 
・画像や<code>CSS</code>ファイルといった外部ファイル読み込みの完了は待ちません。
<h2 id="%EF%BC%92%EF%BC%8Eload%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8Eload%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" aria-hidden="true"></a> ２．loadイベントとは</h2>
・<code>DOM</code>ツリー構築に加えて画像や<code>CSS</code>ファイルを含む外部ファイルの読み込み完了後に自動的に発生するイベントです。 
・<code>load</code> イベントは、<code>DOMContentLoaded</code> イベントよりイベントの発生タイミングが遅いです。
<h2 id="%EF%BC%93%EF%BC%8E%E5%9B%B3%E8%A7%A3%E3%81%99%E3%82%8B%E3%81%A8%E3%80%82%E3%80%82%E3%80%82" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E5%9B%B3%E8%A7%A3%E3%81%99%E3%82%8B%E3%81%A8%E3%80%82%E3%80%82%E3%80%82" aria-hidden="true"></a> ３．図解すると。。。</h2>
<code>DOMContentLoaded</code> イベントと <code>load</code> イベントの発生タイミングの違いを図解します。 
<img src="https://storage.googleapis.com/zenn-user-upload/71498457b1eb-20250918.png" class="md-img" loading="lazy">
※画像は、<a href="https://takayamato.com/eventlistener/" target="_blank" rel="nofollow noopener noreferrer">【JS】 DOMContentLoaded と load の違いを新人でもわかるように解説</a> よりお借りしました。
<h2 id="%EF%BC%94%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%94%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" aria-hidden="true"></a> ４．サンプルプログラム</h2>
<div class="code-block-container">
<div class="code-block-filename-container">Sample.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="22">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
 &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p id="domContent"&gt;DOMツリー構築開始&lt;/p&gt;
 &lt;p hidden="hidden" id="domContentMsg"&gt;DOMツリー構築後に表示&lt;/p&gt;
 &lt;p id="load"&gt;外部ファイル読み込み開始&lt;/p&gt;
 &lt;p hidden="hidden" id="loadMsg"&gt;外部ファイル読み込み後に表示&lt;/p&gt;
 &lt;script src="Sample.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">style.css</div>
<pre class="language-css"><code class="language-css code-line" data-line="39">body {
 background-color: lightskyblue;
}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">Sample.js</div>
<pre class="language-js"><code class="language-js code-line" data-line="44">// DOMツリー構築完了時の処理（自動実施）
document.addEventListener("DOMContentLoaded", () =&gt; {
 document.getElementById("domContent").textContent = "DOMツリー構築完了";

 changeHiddenDomContentMsg();

 // 非表示のメッセージを表示
 function changeHiddenDomContentMsg() {
 let domContentMsg = document.getElementById("domContentMsg");

 if (domContentMsg.hidden) {
 domContentMsg.hidden = false;
 domContentMsg.textContent = "外部ファイル読み込み開始";
 } else {
 domContentMsg.hidden = true;
 }
 }
})

// 画像やCSSなどを含むページ全体の読み込み完了時の処理（自動実施）
window.addEventListener("load", () =&gt; {
 document.getElementById("load").textContent = "外部ファイル読み込み完了";

 changeHiddenLoadMsg();

 // ページ全体の読み込み完了時に非表示のメッセージを表示
 function changeHiddenLoadMsg() {
 let loadMsg = document.getElementById("loadMsg");

 if (loadMsg.hidden) {
 loadMsg.hidden = false;
 loadMsg.textContent = "全リソース読み込み完了";
 } else {
 loadMsg.hidden = true;
 }
 }
})
</code></pre>
</div><h2 id="%EF%BC%95%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%95%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" aria-hidden="true"></a> ５．実行環境</h2>
・OS: Windows 11（バージョン 24H2） 
・ブラウザ: Microsoft Edge（バージョン 140.0.3485.66） 
・エディタ: Visual Studio Code（バージョン 1.104.1）
<h2 id="%EF%BC%96%EF%BC%8E%E5%8F%82%E8%80%83" data-line="90" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%96%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ６．参考</h2>
・<a href="https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event" target="_blank" rel="nofollow noopener noreferrer">Document: DOMContentLoaded イベント</a> 
・<a href="https://developer.mozilla.org/ja/docs/Web/API/Window/load_event" target="_blank" rel="nofollow noopener noreferrer">Window: load イベント</a> 
・<a href="https://takayamato.com/eventlistener/" target="_blank" rel="nofollow noopener noreferrer">【JS】 DOMContentLoaded と load の違いを新人でもわかるように解説</a> 
・<a href="https://qiita.com/axoloto210/items/3208ba1446901fe43cae" target="_blank" rel="nofollow noopener noreferrer">ブラウザがHTMLを受け取ってからDOMツリーを構築するまで</a> 
・<a href="https://www.ipentec.com/document/html/html5-hidden-property" target="_blank" rel="nofollow noopener noreferrer">HTML hidden Property による要素の表示・非表示の切り替え</a>

【JavaScript】DOMContentLoaded イベントと load イベントの違いについて（備忘録）

Discussion