javascriptを書く位置と取得できるDOM - sakanaプログラマーの日記

javascriptでonload時にイベントリスナーの設定しようとして、body部の要素が取得できず、

つまづいたため、javascriptの書く位置と取得できる要素についてまとめてみた。

結論：onload時は自分より下の要素は取れないよ！

loadtest.html

<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
(function(){
	alert("Head_即時関数:body_" + document.body + "_本文：" + document.getElementById("text"));
}());

window.onload = function(){
	alert("Head_onload:body_" + document.body + "_本文：" + document.getElementById("text"));
}();

function disp1(){
	alert("Head_function :body_" + document.body + "_本文：" + document.getElementById("text"));
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
(function(){
	alert("Body_start_即時関数:body_" + document.body + "_本文：" + document.getElementById("text"));
}());

window.onload = function(){
	alert("Body_start__onload:body_" + document.body + "_本文：" + document.getElementById("text"));
}();

function disp2(){
	alert("Body_start_function :body_" + document.body + "_本文：" + document.getElementById("text"));
}
</SCRIPT>
<!--   取得対象の要素 -->
<div id="text">文章</div>

<input type="button" onclick="disp1()" value="Head">
<input type="button" onclick="disp2()" value="body_start">
<input type="button" onclick="disp3()" value="body_end">
<SCRIPT type="text/javascript">
(function(){
	alert("Body_end_即時関数:body_" + document.body + "_本文：" + document.getElementById("text"));
}());

window.onload = function(){
	alert("Body_end__onload:body_" + document.body + "_本文：" + document.getElementById("text"));
}();

function disp3(){
	alert("Body_end_function :body_" + document.body + "_本文：" + document.getElementById("text"));
}
</SCRIPT>
</BODY>
</HTML>

結果

	即時間数	onload	function
Head	×	×	〇
Body_start	△	△	〇
Body_end	〇	〇	〇

〇…両方取得できる。　△…bodyのみ取得できる。　×…取得できない。