DOM就是文档对象模型(Document Object Model),最初是W3C为了解决浏览器大战时代不同浏览器之间的差别而制定的,主要就是IE和Netscape Navigator之间的差别。
最初出现的是
DOM Level 1规范。
目前主流的浏览器都可以支持
DOM Level 2 HTML规范。
DOM实际上有两种,HTML DOM和XML DOM。HTML DOM是一种特殊的DOM,它仅支持使用getElementById()和getElementsByTagName()两个方法来进行查询(请不要将IE私有的all()方法混淆进来),而XML DOM则可以与XPath API相结合,基于强大的正则表达式来进行查询。Ajax开发中所用到的主要是HTML DOM,如果不涉及到处理XML格式的数据,就不需要用到XML DOM。以下所说的DOM也是指HTML DOM。
用简单通俗的语言来说,DOM使得你可以访问页面上的标准组件(元素、样式表、脚本、etc.)并处理它。多年来,那些希望创建前端Web应用的程序员们都必须使用Java Applet、Flash或者ActiveX。当然现在这些工具还是可以使用的,但是支持DOM的浏览器使得Web开发人员拥有了创建多样化、功能强大的基于Web的应用程序的能力,而且完全使用基于标准的技术。
DOM将整个HTML文档展现为内存中的一棵树状结构(浏览器内存中仅仅只有一棵这样的HTML DOM树,其根节点为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次。
显然,后面一种方法重新呈现的次数最少,因此执行的效率最好,这就是在Ajax in Action中所推荐的方法。
另外,DOM树上的每个节点都是一个非常庞大的对象。为了直观地了解DOM节点是如何庞大,可以使用Firefox中的DOM检查器任意打开一个DOM节点,其中属性的数量会让你大吃一惊,尤其是style数组中的属性数量。因此当动态创建的DOM节点不再使用时,一定要及时释放掉(就是将到它的引用全部设置为null,使其处于不可达的状态,以便垃圾回收器能够及时将其回收)。如果没有及时释放不用的DOM节点,一段时间之后可能会造成惊人的内存泄漏。
最后再说一下,innerHTML这个属性并不是W3C DOM的标准属性。这个属性最初是IE的发明,但是开发者使用起来非常方便,于是成为了事实上的标准。其他所有主流的浏览器也都支持这个属性,所以可以放心使用。而outerHTML、innerText则只有IE支持,在开发跨浏览器的Ajax应用时,不应该使用这两个属性。
分享到:
相关推荐
DOM文档对象模型介绍,DOM文档对象模型介绍
总的来说,2010版的"DOM文档对象模型"手册是Web开发者的宝贵资源,它详尽地解释了DOM的各个方面,无论你是新手还是经验丰富的开发者,都能从中受益匪浅。通过深入理解和熟练运用DOM,你可以更好地构建动态、交互性强...
Dom文档对象模型-2010版,对各种Dom 模型进行介绍,转载自 web圈。 Dom文档对象模型-2010版,对各种Dom 模型进行介绍,转载自 web圈。 Dom文档对象模型-2010版,对各种Dom 模型进行介绍,转载自 web圈。
这个库允许开发者通过DOM(Document Object Model)模型来解析和操作HTML。它能将HTML字符串转换为一个可遍历的对象树,这样我们就可以像操作数组一样操作HTML元素。例如,我们可以轻松地查找、添加、删除或修改DOM...
通过阅读《常用手册 DOM文档对象模型》,开发者不仅可以深入理解DOM的基本概念,还能掌握实际操作DOM的技巧,从而提高网页和应用程序的交互性和动态性。此外,对于学习前端开发和Web应用的人员来说,这是一份非常...
本文将详细解析与"C#源代码-文档对象模型"相关的知识点,帮助你理解C#编程中涉及的DOM(Document Object Model)概念。 首先,文档对象模型(DOM)是W3C组织提出的一种标准,它为HTML和XML文档提供了一种结构化的...
**DOM文档对象模型** DOM(Document Object Model)是W3C组织制定的一种标准,它提供了一种结构化的表示XML或HTML文档的方式,并定义了访问和操作这些文档的标准方法。DOM将文档视为一棵由节点组成的树,每个节点...
**DOM文档对象模型** DOM(Document Object Model)是万维网联盟(W3C)制定的一种标准,它提供了一种结构化的表示XML或HTML文档的方法,并允许编程语言与这些文档进行交互。DOM将整个文档视为一个由节点组成的树形...
第三章:javascript-DOM对象模型-补充课件.ppt
Apache AXIOM(Abstract eXtensible Information Model)是一个高性能、基于StAX(Streaming API for XML)的XML对象模型实现。它提供了创建、修改和查询XML文档的能力,是Apache SOAP项目的后续产品。AXIOM的设计...
### JavaScrip文档对象模型(DOM)知识点详解 #### DOM简介 文档对象模型(Document Object Model,简称DOM)是一项由万维网联盟(W3C)制定的标准,旨在提供一种独立于编程语言的接口,使得开发者能够通过脚本语言...
DHTML 对象模型如图-1 所示,包括 window 对象、document 对象、screen 对象、history 对象、location 对象、navigator 对象等。 2.1.2. screen 对象 screen 对象每个 Window 对象的 screen 属性都引用一个 Screen...
在Web开发中,DOM(文档对象模型)是HTML或XML文档的结构化表示,它允许JavaScript与网页内容进行交互。随着用户交互、动态数据加载或JavaScript操作,DOM可能会频繁变动,而`dom-element-watcher`库就是为了帮助...