JavaScript で DOMContentLoaded や onload を使う理由、の備忘録

javascript

JavaScript を scriptタグで書く際、JavaScript の処理と html のパースは同じ時間の流れで進みます。
大抵は scriptタグを headタグ内に記述するため、いきなり DOM でアクセスしようとしても、body ですらパースされていません。
html のパースが終わって DOMツリーが出来上がるまで待つ必要があります。


ぶっちゃけ当たり前の話ですが、JavaScript も jQuery などのライブラリを使っていると、この辺を意識しなくなるので、ふと分からなくなる事があります。
なので見れば思い出すようにメモしておきます。


主にアクセス解析用のscriptタグはどこに書くべきか、よく忘れるのでメモ - kanonjiの日記 から、色々と考えていたら、なんだか気になってしまいました。

DOMツリーの完成*1を待ってから処理を始めるためのメソッド

document.addEventListener("DOMContentLoaded",function(){},false);
IE以外
window.addEventListener("load",function(){},false);
IE以外
window.attachEvent("onload",function(){});
IE
$(document).ready(function(){});
jQuery
YAHOO.util.Event.onDOMReady(function(){});
YahooUI
YAHOO.util.Event.onContentReady(function(){});
YahooUI
Ext.onReady(function(){});
Ext
body onload="function(){}"
汎用だけど古い手段
window.onload = function(){};
汎用だけど古い手段

DOMツリーの完成を待たないとどうなるかを見る為のソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 京 -->
<title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</style>
<script>
<!--
var div = window.document.createElement('div');
var get = function(div, arg){
  var body = window.document.getElementsByTagName('body')[0];
  var p = window.document.createElement('p');
  p.textContent = p.innerText = body.innerHTML;
  var h2 = window.document.createElement('h2');
  h2.textContent = h2.innerText = arg;
  div.appendChild(h2);
  div.appendChild(p);
};

var display = function(div){
  var body = window.document.getElementsByTagName('body')[0];
  body.appendChild(div);
}
if(window.addEventListener){
  window.document.addEventListener("DOMContentLoaded", function(event){get(div, 'addEventListener("DOMContentLoaded")')}, false);
  window.addEventListener("load", function(event){get(div, 'addEventListener("load")')}, false);
} else {
  window.attachEvent("onload", function(event){get(div, 'attachEvent("onload")')});
}
window.onload = function(event){get(div, 'window.onload')};
 -->
</script>
</head>
<body onload="get(div, '&lt;body onload=\'\'&gt;');">

<ul>
  <li>1個目</li><script>get(div, 'li 1個目');</script>
  <li>2個目</li><script>get(div, 'li 2個目');</script>
</ul>

<button onclick='display(div);'>表示</button>

</body>
</html>

*1:や、すべてのコンテンツのロード