Window: DOMContentLoaded イベント

DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

バブリング あり
キャンセル 可 (ただしキャンセル不可の単純イベントとして定義されている)
インターフェイス Event
イベントハンドラープロパティ なし

このイベントの本来の対象は、読み込まれた Document です。このイベントを Window からキャプチャやバブリングの過程で待ち受けすることができます。このイベントについての全般的な詳細は、 Document: DOMContentLoaded イベントのページをご覧ください。

別なイベントである load は、ページ全体が読み込まれたことを検出するためにのみ使用してください。 load を、 DOMContentLoaded がより適切である場面に使用する間違いがよくあります。

基本的な使用

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

仕様書

Specification
HTML Standard
# event-domcontentloaded

ブラウザーの互換性

BCD tables only load in the browser

関連情報