认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件

DOM，众所周知是文档对象模型。这其中文档是什么呢？对象模型是什么？针对的对象是哪些？

其实可以把网页看做是一种文档，而且是有结构的文档。

其次，网页中的各种标记或者叫做标签，可以映射成我们所谓的对象。我们写js一般就是对这些对象进行操作。关键是我们怎么获取到这些对象，无疑，这就是DOM的高超之处，它给我提供一种方便获取的对象的机制。当然，要搞清楚具体怎么获取的，我们不得不认识下一DOM中的M(Model也有人成为Map)，了解它是怎样的一个内部结构。

首先，给一种检测浏览器对于DOM规范支持程度的方法：

[html]  view plain copy print ?

1. <script>  
2. var dom = "HTML";//指定DOM模块  
3. var ver = "1.0";//指定DOM级别  
4. if(document.implementation)  
5. {  
6.     //如果浏览器支持implementation对象，则进行下一步测试  
7.     if(document.implementation.hasFeature(dom,ver))  
8.     {  
9.         //检测指定DOM模块及版本的支持情况  
10.         alert("支持：\n"+ dom + " " + ver);  
11.     }  
12.     else  
13.     {  
14.         alert("不支持：\n"+ dom + " " + ver);  
15.     }  
16. }  
17. else  
18. {  
19.     alert("不支持：\n DOMImplementation对象");      
20. }  
21. </script>  

DOM实质上把网页文档看做树形结构，一提到树形结构，大家都会想到根节点，子节点，兄弟节点，同样在DOM中，有对应的属性是parent(父)表示上一级元素，child(子)表示下一级元素，sibling(兄弟)表示同级相邻元素，借助这种模式把网页进行结构化。

DMO加载过程：

网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤：

1.解析HTML结构

2.加载外部脚本和样式表文件

3.解析并执行脚本代码

4.构造HTML DOM模型

5.加载图片等外部文件

6.页面加载完毕

从以上顺序可以看出，js等脚本会在DOM文档构造之前执行，这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中，这样能确保文档加载完毕后再执行脚本。所以我们一般这样写：

window.onload = function(){//执行脚本}

但是还有一个问题，如果像图片之类的外部文件太多太大，也大大地延迟了脚本的执行时间。，所以为了避免这种情况，我们也可以把脚本文件放在html文档结构中间。但是可想而知这样破坏了文档结构，所以我们可以用捕捉DOM加载的过程来判断Document对象属性是否加载完毕，可以再这个时候让脚本文件执行。实现的代码如下：

[javascript]  view plain copy print ?

1. <script>  
2. function a()  
3. {  
4.     if(document && document.getElementsByTagName && document.getElementById && document.body)  
5.     {  
6.         clearInterval(timer);  
7.     }  
8. }  
9. var timer = setInterval(a,10);//设计一个定时器，循环调用a函数  
10. </script>