很多時候我們在使用document.getElementById的時候直接在script標籤中獲取物件，然後使用，此時程式會出現該物件為undefined。

1. <script>
2.     var dom = document.getElementById("target"); 
3.     alert(dom); // undefined 
4. </script>

        但是如果你把這段程式碼放到文件的最末尾，你再執行他的結果便不是undefined。這到底是為什麼呢？這個我們要從文件的載入來說起，一個html文件的載入都是按照一定順序來載入的，當載入到head部分的js時，他會block(阻塞)下面內容的載入，這個時候我們js中去獲取的物件都還沒有，自然就為undefined。但是如果你將這個程式碼放到最後，頁面按照順序載入，當所有的html都載入完成，再去載入你的js，此時，頁面中的物件已存在，自然不會為undefined。

        上面的程式碼是立即執行，所以必須要考慮他所放的位置，但是如果是一個function，那麼在程式碼載入的時候不會執行，只有在需要呼叫它的地方才會去觸發，而在呼叫的地方已經將頁面內容載入完成，所以function裡面去使用上面的程式碼也不會出現undefined。

         在jQuery中，我們使用$(document).ready(function(){})，在這個function裡面他的方法為什麼會等到頁面載入完成之後再執行呢，其實我們可以仔細的去看一下他的ready方法。為了能更加清楚的描述出這種方法，我們下面用一個模擬例子來說明：

1. jQuery.ready = 
   function(f){ 
2.     // 判斷瀏覽器
3.     var browser = window.navigator.userAgent; 
4.     var isIE = false; 
5.     if(/msie/.test(browser.toLowerCase())){ 
6.         isIE = true; 
7.     } 
8.     // IE
9.     if(isIE){ 
10.         document.onreadystatechange = function(){ 
11.             if(document.readyState == "complete" || document.readyState == 
    "loaded"){ 
12.                 f.call(); 
13.             } 
14.         }; 
15.     }else{ // 非IE
16.         if(document.addEventListener){ 
17.             document.addEventListener("DOMContentLoaded", f, false); 
18.         } 
19.     } 
20. } 

        在這裡，ready函式傳遞了另外一個函式，這個f是我們在頁面載入完成之後需要去呼叫的方法。因此在ready函式中，我們要去判斷頁面是否載入完成，再去執行我們ready中的方法。

        又是因為瀏覽器的原因，IE又要搞特殊！Mozilla添加了DOMContentLoaded事件，因此我們只需用給document新增該事件，同時將要執行的函式傳遞過去即可。而IE，我麼要去判斷他的onreadystatechange狀態，當他載入完成時為complete或者為loaded的時候，此時我們才可以去呼叫他的方法。