JS高级程序设计-第一章 JS简介(DOM简介)

文档对象模型(DOM)是针对XML但经过扩展用于HTML的应用程序编程接口。

DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。看下面这个HTML页面:

<html>

  <head>

    <title>Sample Page</title>

  </head>

  <body>

    <p>Hello World</p>

  </body>

</html>

在DOM中,这个页面可以通过图1-2所示的节点图表示。

html

|

| - - -head

        |

        | - - -title

                |

                | - - -Sample Page

| - - -body

        |

        | - - -p

                |

                | - - -Hello World

通过DOM创建的这个表示文档的树形图,开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API ,开发人员可以轻松自如地删除、添加、替换或修改任何节点。

1. 为什么要使用DOM

在Internet Explorer 4和Netscape Navigator 4分别支持的不同形式的DHTML(DynamicHTML)的基础上,开发人员首次无需重新加载网页,就可以修改其外观和内容。然而,DHTML在给Web技术发展带来巨大进步的同时,也带来了巨大的问题。由于Netscape和微软在开发DHTML方面各持己见,过去那个只编写一个HTML页面就能够在任何浏览器中运行的时代结束了。

对开发人员而言,如果想继续保持Web跨平台的天性,就必须额外多做一些工作。而人们真正担心的是,如果不对Netscape和和微软加以控制,web开发领域就会出现技术上两强割据,浏览器互不兼容的局面。此时,负责制定Web通信标准的W3C(World Wide Web Consortium, 万维网联盟)开始着手规划DOM。

 

2. DOM级别

DOM1级

DOM1级(DOM Level 1)于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成:DOM核心(DOM Core)和DOM HTML。其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。

DOM2级

如果说DOM1级的目标主要是映射文档的结构,那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了(DHTML一直都支持的)鼠标和用户界面事件、范围、便利(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(Cascading Style Sheets, 层叠样式表)的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入了下列新模块,也给出了众多新类型和新接口的定义。

  • DOM视图(DOM Views):定义了跟踪不同文档(例如,应用CSS之前和之后的文档)视图的接口
  • DOM事件(DOM Events):定义了事件和事件处理的接口
  • DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围 (DOM Traversal and Range): 定义了遍历和操作文档树的接口

DOM3级

DOM3级则进一步扩展了DOM,

  • 引入了以统一方式加载和保存文档的方法——在DOM加载和保存模块中定义
  • 新增了验证文档的方法——在DOM验证(DOM Validation)模块中定义

DOM3级也对DOM核心进行了拓展,开始支持XML1.0规范,涉及XMLInfoset、XPath和XMLBase。

tips: 请读者注意,DOM并不只是针对JavaScript的,很多别的语言也都实现了DOM。不过,在Web浏览器中,基于ECMAScript实现的DOM的确已经成为JavaScript这门语言的一个重要组成部分。

tips:在阅读DOM标准的时候,读者可能会看到DOM0级(DOM Level 0)的字眼。实际上,DOM0级标准是不存在的;所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体来说,DOM0级指的是Internet Explorer 4.0 和 Netscape Navagator 4.0最初支持的DHTML。

3. 其他DOM标准

SVG、MathML、SMIL(略)

4. web浏览器对DOM的支持

浏览器

DOM兼容性

Netscape Navigator 1- 4 -
Netscape 6+(Mozilla 0.6.0+) 1级、2级(几乎全部)、3级(部分)
IE2 - 4 -
IE5 1级(最小限度)
IE5.5-IE8 1级(几乎全部)
IE9+ 1级、2级、3级
Opera 1-6 -
Opera 7-8.x 1级(几乎全部)2级(部分)
Opera 9-9.9 1级、2级(几乎全部)、3级(部分)
Opera 10+ 1级、2级、3级(部分)
Safari 1.0.x 1级
Safari 2+ 1级、2级
Chrome 1+ 1级、2级(部分)
Firefox 1+ 1级、2级(几乎全部)、3级(部分)
发布了10 篇原创文章 · 获赞 0 · 访问量 187

猜你喜欢

转载自blog.csdn.net/q3238882639/article/details/105153175