探究DOM文档对象模型用法

开发 前端
DOM就是文档对象模型,DOM文档对象模型实际上有两种,HTMLDOM和XMLDOM,它最初是W3C为了解决浏览器大战时代不同浏览器之间的差别而制定的,主要就是IE和NetscapeNavigator之间的差别。

本文向大家描述一下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应用时,不应该使用这两个属性。

【编辑推荐】

  1. JavaScript DOM特性与应用详解
  2. W3C DOM模型用法详解
  3. 深入学习DOM模型基础
  4. 深入了解JavaScript HTML DOM对象
  5. 术语汇编 Javascript DOM技术探究

 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-09-28 11:03:19

XML DOM

2010-09-28 14:00:25

DOMAPI

2012-04-26 08:29:22

DOM

2010-09-28 10:03:15

DOM文档对象模型

2010-09-28 13:24:34

DOM文档对象模型

2010-09-28 10:40:32

HTML DOM

2010-09-28 09:49:49

DOM模型

2010-09-28 09:38:22

DOM模型

2010-09-28 10:09:35

DOM对象模型

2012-06-27 09:44:28

ibmdw

2021-09-09 10:26:26

Javascript 文档对象前端

2010-09-28 10:24:50

HTML DOMXML DOM

2010-09-28 15:27:09

JavaScript

2010-09-28 08:54:49

JavascriptDOM

2010-08-25 14:26:09

CSSdisplay

2010-09-13 14:24:17

JavaScript

2011-03-07 13:27:13

SQLCase

2010-08-30 08:41:43

DIV显示DIV隐藏

2009-09-10 17:44:36

DOM模型INQ模型

2010-09-28 09:33:25

DOM模型
点赞
收藏

51CTO技术栈公众号