【js】DOMContentLoadedとload

js

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';
});