HTML の読みこみが終わった後に DOM を作りたいときは
document.addEventListener('DOMContentLoaded', test, false)
とする。イベントリスナーに DOMContentLoaded を指定する。上のコードでは、すべての DOM が構築された後に test という関数が動く。
DOMContentLoaded は
- 画像の読みこみは待たない
- 自分より後のスタイルシートは待たない
- 自分より前のスタイルシートは待つ
- 外部スクリプトの読みこみは待つ
- async は待たない
- defer は待たない
画像をロードしている間に DOMContentLoaded が実行される可能性はある。DOMContentLoaded は外部スクリプトの読みこみは待つ。DOMContentLoaded は document に対して設定し、window には指定しない。
DOMContentLoaded と load の違い
load はツリーの解析だけでなく、画像も含めたすべてのリソースが読みこみが終わった時点で実行される。
document.addEventListener('load', test, false)