JavaScript ページの読み込みやDOMの構築が完了した際に処理を行う
DOMの構築が完了した際に処理を行うには「DOMContentLoaded」イベントを検知します。DOMContentLoadedイベントは、ページの読みこみが完了したことを示す「load」イベントよりも先に発生します。「DOMContentLoaded」はページ上のDOMの使用が可能になったことを示すので、このイベントが発生した後であれば、スクリプトでDOM操作を行うことができます。
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
ele.innerHTML += "loadイベント発生<br>";
}, false);
window.addEventListener("DOMContentLoaded" , function(){
var ele = document.getElementsByTagName("output")[0];
ele.innerHTML += "DOMContentLoadedイベント発生<br>";
}, false);
</script>
<h1>DOMContentLoaded/loadイベント</h1>
<output></output>
</body>イベントが完了した際にメッセージが順番に表示されます。
