Web培训

亿元级外企Web培训企业

  • 全国服务监督电话400-827-0010
web前端培训 > web前端笔记 > JS应用DOM入门和DHTML对象模型的比较
  • JS应用DOM入门和DHTML对象模型的比较

    发布:达内  来源:达内  时间: 2015年01月12日

  • DOM是文档对象化模型(Document Object Model)的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容,但如果借助DOM技术,我们就可以通过更加直接而且简易的方式达到同样的目的。...

  • DOM是文档对象化模型(Document Object Model)的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容,但如果借助DOM技术,我们就可以通过更加直接而且简易的方式达到同样的目的。

    概要

    DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持,它采取一种非常直观且一致的方式将HTML文档进行模型化处理,并借此提供访问、导航和操作页面的简易编程接口。通过 DOM技术,我们不仅能够访问和更新页面的内容及结构,而且还能操纵文档的风格样式。DOM由W3C组织所倡导,这样,大多数浏览器都将最终支持这项技术。

    DOM和DHTML对象模型的比较

    可以这么说,DOM是从DHTML对象模型发展而来的。但更准确而言,DOM更象是对DHTML对象模型进行了根本变革的产物。

    借助DHTML对象模型技术,我们能够单独地访问并更新HTML页面上的对象,每个HTML标记通过它的ID和NAME属性被操纵,每个对象都具有自己的属性、方法和事件,通过方法操纵对象,通过事件触发因果过程。

    DOM则要比DTHML对象模型功能更全面,它提供了一个对整个文档的访问模型,而不仅仅再局限于单一的HTML标记(Tag)范围内。DOM将文档描绘为一个树形(Tree)结构,Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性,这种关联性包括child(孩子)类型、parent(双亲)类型和兄弟(sibling)类型。

    使用DHTML对象模型访问和更新HTML页面内容时,不可避免地需要查询相关技术手册。因为HTML对象很多,每个HTML对象又有很多的属性、方法和事件。但是采用DOM技术访问和更新HTML页面内容时,任何手册都可以放在一边了。首先查 一下HTML源代码,推算出页面的Tree结构模型;然后,按照层次结构关系操纵需要的属性。比如要更新页面上的文本项内容,如果采用DTHML对象模型,需要使用到innerHTML属性,但必须要注意并不是所有的HTML对象都支持innerHTML属性;如果采用DOM技术,只要修改相关Tree节点都具有的nodeValue属性值即可。

    DOM技术使我们可以方便地沿着文档的树型结构在上、下以及一侧方向做节点导航,从页面的任何地方开始,使用child、parent或者sibling 三种关联性组成的表达式代表页面的另外地方。而DTHML对象模型不包含Tree结构,所以也就不具备页面对象的相互导航功能。当我们从一个标记对象开始时,不可能用关联表达式来表达相近的标记。虽然对于某些标记,比如

    ,DHTML对象模型可以提供特殊的属性和方法存取相关内容,但实现方式和效果远不如DOM技术显得一致化和直观化。采用DTHML对象模型访问
    中的单元(cell)内容时,首先要查询手册确定单元的坐标值i、j,然后再通过表达式 tableObj.rows[i].cells[j].innerHTML实现访问。但对于DOM来说,访问TABLE每个单元的内容将变得非常简单,只需要建立一个节点导航表达式就可以。

    另外,DOM技术允许我们操纵文档的Tree结构,这包括创建新节点(nodes)、删除存在的节点以及在Tree中移动节点。实际上,这就是执行创建新标记(tags)、删除存在的标记以及在文档中移动标记的过程。DTHML对象模型则不允许更改文档结构,我们只能操纵现有的对象。

    与DHTML对象模型相比较,DOM只有一个缺憾:DOM不能支持事件处理,而DTHML对象模型对于文档对象则拥有一个广泛的事件处理功能。

  • 上一篇:一款纯css3实现的超炫3D表单

    下一篇:从Bootstrap到 Amaze跨屏适配兼容更精彩

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56