很多时候我们在使用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的时候，此时我们才可以去调用他的方法。