【JavaScript】DOMツリー生成直後に発火するDOMContentLoaded

Web

2018.12.28

タイミングによっていくつか存在する、JavaScriptでページ読み込み直後に処理を行いたい場合の発火ポイントについてご紹介します。

みなさんこんにちは！
筋肉カメレオンです。

今回は、Web制作時に助かる、ページ読み込み直後に処理を行いたい場合のイベント発火ポイントについてご紹介します。

DOMContentLoaded

ブラウザがサーバーからレスポンスデータを受け取り、DOM生成しブラウザに表示します。

まず、グローバルオブジェクトの「Window」オブジェクトを生成し、そのプロパティである「Document」オブジェクトが生成されます。

DocumentオブジェクトはDOMツリーを読み込んでいき、すべて解析が終わるとDOMContentLoadedイベントが発火されます。

つまりDOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火します。

loadイベントはDOMツリーに加え、画像やすべてのスクリプトが読み込まれた時点で発火します。

そのため、画像やスクリプトに処理を追加する場合は、loadイベントを使用し、影響が無く、DOMツリー生成直後に発火したいのであれば、DOMContentLoadedイベントの使用が良いです。

sample code

document.addEventListener('DOMContentLoaded', function() {
console.log("sample");
});

それぞれタイミングが異なるので、本来の望ましい挙動に近い記述で記載しましょう。

それでは。