探究DOM文档对象模型用法

　　本文向大家描述一下DOM文档对象模型，DOM文档对象模型实际上有两种，HTMLDOM和XMLDOM  。HTMLDOM是一种特殊的DOM，它仅支持使用getElementById()和getElementsByTagName()两个方法来进行查询（请不要将IE私有的all()方法混淆进来），而XMLDOM则可以与XPathAPI相结合，基于强大的正则表达式来进行查询  。

　　DOM文档对象模型

　　DOM就是文档对象模型（DocumentObjectModel），最初是W3C为了解决浏览器大战时代不同浏览器之间的差别而制定的，主要就是IE和NetscapeNavigator之间的差别  。

　　DOM文档对象模型实际上有两种，HTMLDOM和XMLDOM  。HTMLDOM是一种特殊的DOM，它仅支持使用getElementById()和getElementsByTagName()两个方法来进行查询（请不要将IE私有的all()方法混淆进来），而XMLDOM则可以与XPathAPI相结合，基于强大的正则表达式来进行查询  。Ajax开发中所用到的主要是HTMLDOM，如果不涉及到处理XML格式的数据，就不需要用到XMLDOM  。以下所说的DOM文档对象模型也是指HTMLDOM  。

　　用简单通俗的语言来说，DOM文档对象模型使得你可以访问页面上的标准组件（元素、样式表、脚本、etc.）并处理它  。多年来，那些希望创建前端Web应用的程序员们都必须使用JavaApplet、Flash或者ActiveX  。当然现在这些工具还是可以使用的，但是支持DOM的浏览器使得Web开发人员拥有了创建多样化、功能强大的基于Web的应用程序的能力，而且完全使用基于标准的技术  。

　　DOM文档对象模型将整个HTML文档展现为内存中的一棵树状结构（浏览器内存中仅仅只有一棵这样的HTMLDOM树，其根节点为document对象），每个元素、属性都是树上的一个节点  。可以通过JavaScript来访问这棵DOM树，遍历树上的节点、动态添加、删除树上的节点、设置或修改某个节点的样式、设置或修改某个节点中保存的数值等等  。通过JavaScript对于这棵DOM树所做的任何修改都会立即生效，JavaScript不能够控制浏览器重新呈现DOM树的时间  。因为浏览器重新呈现DOM树是一个非常耗时的操作，所以应该将做这种操作的次数尽量减到最少  。

　　假设我动态创建了一个div作为容器，在div中包含了5个动态加载的img元素，如果我采取这样的顺序来编写代码：

　　◆创建div，将其附加到document上  。

　　◆创建5个img，每次一创建，就立即将其附加到div上（从而附加在document上）  。

　　那么浏览器重新呈现DOM树做了几次呢？一共做了6次  。

　　如果我采取这样的顺序来编写代码呢：

　　◆创建div，

　　◆创建5个img，将其附加在div上  。

　　◆将div附加到document上  。

　　那么浏览器重新呈现DOM树做了几次呢？只做了1次  。

　　显然，后面一种方法重新呈现的次数最少，因此执行的效率最好，这就是在AjaxinAction中所推荐的方法  。

　　另外，DOM树上的每个节点都是一个非常庞大的对象  。为了直观地了解DOM文档对象模型节点是如何庞大，可以使用Firefox中的DOM检查器任意打开一个DOM节点，其中属性的数量会让你大吃一惊，尤其是style数组中的属性数量  。因此当动态创建的DOM节点不再使用时，一定要及时释放掉（就是将到它的引用全部设置为null，使其处于不可达的状态，以便垃圾回收器能够及时将其回收）  。如果没有及时释放不用的DOM节点，一段时间之后可能会造成惊人的内存泄漏  。

　　最后再说一下，innerHTML这个属性并不是W3CDOM的标准属性  。这个属性最初是IE的发明，但是开发者使用起来非常方便，于是成为了事实上的标准  。其他所有主流的浏览器也都支持这个属性，所以可以放心使用  。而outerHTML、innerText则只有IE支持，在开发跨浏览器的Ajax应用时，不应该使用这两个属性  。