DOM,众所周知是文档对象模型。这其中文档是什么呢?对象模型是什么?针对的对象是哪些?
其实可以把网页看做是一种文档,而且是有结构的文档。
其次,网页中的各种标记或者叫做标签,可以映射成我们所谓的对象。我们写js一般就是对这些对象进行操作。关键是我们怎么获取到这些对象,无疑,这就是DOM的高超之处,它给我提供一种方便获取的对象的机制。当然,要搞清楚具体怎么获取的,我们不得不认识下一DOM中的M(Model也有人成为Map),了解它是怎样的一个内部结构。
首先,给一种检测浏览器对于DOM规范支持程度的方法:
<script> var dom = "HTML";//指定DOM模块 var ver = "1.0";//指定DOM级别 if(document.implementation) { //如果浏览器支持implementation对象,则进行下一步测试 if(document.implementation.hasFeature(dom,ver)) { //检测指定DOM模块及版本的支持情况 alert("支持:\n"+ dom + " " + ver); } else { alert("不支持:\n"+ dom + " " + ver); } } else { alert("不支持:\n DOMImplementation对象"); } </script>
既然看做树形结构,那么就有对应的节点。DOM中有三大节点,分别是元素节点,文本节点,属性节点
元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>等等。元素节点之间可以相互包含(当然遵循一定的规则)
文本节点:包含在元素节点中。
属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述。
DMO加载过程:
网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤:
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造HTML DOM模型
5.加载图片等外部文件
6.页面加载完毕
从以上顺序可以看出,js等脚本会在DOM文档构造之前执行,这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中,这样能确保文档加载完毕后再执行脚本。所以我们一般这样写:
window.onload = function(){//执行脚本}
但是还有一个问题,如果像图片之类的外部文件太多太大,也大大地延迟了脚本的执行时间。,所以为了避免这种情况,我们也可以把脚本文件放在html文档结构中间。但是可想而知这样破坏了文档结构,所以我们可以用捕捉DOM加载的过程来判断Document对象属性是否加载完毕,可以再这个时候让脚本文件执行。实现的代码如下:
<script> function a() { if(document && document.getElementsByTagName && document.getElementById && document.body) { clearInterval(timer); } } var timer = setInterval(a,10);//设计一个定时器,循环调用a函数 </script>
原文:http://blog.csdn.net/u010792238/article/details/23444351