JavascriptのDOMContentLoadedとloadについてまとめています。
サマリ
- DOMContentLoadedはhtmlをブラウザが解釈してDOMツリーを作成し終わったタイミングで発火する
- loadは画像や動画など全てのコンテンツをダウンロードし終わった後に発火する
- DOMContentLoadedはdocument、windowに登録できるがloadはwindowのみ登録可能
- 画像のダウンロードなど待つ必要がない場合はDOMContentLoadedで定義するとユーザーを待たせることがない
- DOMが生成される前にイベントを発火するとエラーになるのでDOMContentLoaded、loadを用いて制御するのが一般的
document.addEventListener("DOMContentLoaded", function () { const h1 = document.querySelector('h1'); h1.style.color = 'red'; }); window.addEventListener("load", function () { const h1 = document.querySelector('h1'); h1.style.color = 'red'; });