DOMContentLoadedイベント

DOMContentLoadedイベント

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【DOMContentLoaded イベントとは】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。このイベントは addEventListener メソッドの引数として DOMContentLoaded を指定してイベントリスナーを登録してのみ利用できます。

【DOMContentLoadedイベントの使い方】
DOMContentLoaded イベントは HTML ページの読み込みが完了し HTML のパース(解析)が完了して DOM ツリーの構築が完了した時点で発生するイベントです。

【イベントリスナーを登録する場合】
DOMContentLoaded イベントについては属性やプロパティを利用した方法は使用出来ない。

【引数に Event が使われていたら】

サンプルコード

ブラウザを起動する

【DOMContentLoadedイベントとloadイベントの違い】
HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。
この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。