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

タイミングによっていくつか存在する、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");
});

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

それでは。

\ アフィリエイト満足度1位 /

アフィリエイトを始めるなら、まず登録いただきたいASPが「A8.net」
豊富な広告と、使いやすい管理画面。
アフィリエイト満足度ランキングで9年連続1位を獲得！
成果報酬を即日振込申請できる、即時支払機能で報酬を即現金できます。