首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html

非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别。让我知道了DOM0级并不存在,而我们现在常用CoreDOM、HTML-DOM都属于DOM1级,而事件的接口,则是从DOM2级开始引入。

====================== 具体内容 =====================

JavaScript历经了从被人误解到现在的被万众瞩目的转变。随着一些JavaScript编程规范的推出(如:AMDCMD),其应用范围也从前端一些小功能逐渐扩展到后端和一些大项目中。那么,JavaScript从混乱无序到严谨规范经历的哪些过程,在这些过程中又JavaScript增加了哪些功能特性?

1. JavaScript的起源

1.1 JavaScript的诞生与发展

JavaScript最初由NetscapeBrendan Eich设计, Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。由此看来,JavaScript只是出于营销考虑,看起来像Java实则与Java没有一点关系。

JavaScript出现之前,Web浏览器仅是一种能够显示超文本文档的软件;在JavaScript出现之后,网页的交互性得到明显改善,其内容也不再局限于简单的文本。JavaScript第一个版本,即:JavaScript 1.0,在1995年Netscape Navigator 2浏览器中推出。

JavaScript 1.0发布时,Netscape Navigator浏览器还占主宰地位。MicrosoftIE 3.0时发布了VBScript命名为JScript。面对微软的竞争,Netscape在与Sun联合ECMA(欧洲计算机制造协会)对JavaScript语言进行了标准化,即:ECMA-262(ECMAScript),也就是我们今天的使用JavaScript语言标准,目前最新标准为ECMAScript 6

1.2 JavaScript的设计功能

JavaScript最初设计是作为给非程序人员的脚本语言,JavaScript做为一种解释型脚本语言,通常只能依赖Web浏览器去完成一些操作而不能像动态语言那样独立运行。也正是由于JavaScript的简单性,使其比较容易的学习和使用。

JavaScript向用户提供了一些操控Web浏览器和Web文档的API,即:BOM(浏览器对象模型)和DOM(文档对象模型)。你可以通过JavaScript调整浏览的宽、高、位置等,同样你可通过JavaScript调整Web页面内容的显示、隐藏、表单提交等。

2. DOM的诞生与发展

2.1 DOM是什么

DOM,文档对象模型(Document Object Model)。DOM是 W3C(万维网联盟)的标准,DOM定义了访问HTMLXML文档的标准。在W3C的标准中,DOM是独于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM由以下三部分组成:

  • 核心DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

2.2 DOM的发展-DOM0、DOM1、DOM2、DOM3的区别

DOM0

JavaScript在早期版本中提供了查询和操作Web文档的内容API(如:图像和表单),在JavaScript中定义了定义了'images''forms'等,因此我们可以像下这样访问第一张图片或名为“user”的表单:

document.images[0]
document.forms['user']

这实际上是未形成标准的试验性质的初级阶段的DOM,现在习惯上被称为DOM0,即:第0级DOM。由于DOM0W3C进行标准备化之前出现,还处于未形成标准的初期阶段,这时NetscapeMicrosoft各自推出自己的第四代浏览器,自此DOM遍开始出各种问题。

DOM0与DHTML

Netscape Navigator 4IE4分别发布于1997年的6月和10月,这两种浏览器都大幅扩展了DOM,使JavaScript的功能大大增加,而此时也开始出现一个新名词:DHTML

DHTMLDynamic HTML(动态HTML)的简称。DHTML并不是一项新技术,而是将HTML、CSS、JavaScript技术组合的一种描述。即:

  • 利用HTML把网页标记为各种元素
  • 利用CSS设置元素样式及其显示位置
  • 利用JavaScript操控页面元素和样式

利用DHTML,看起来可以很容易的控制页面元素,并实现一此原本很复杂的效果(如:通过改变元素位置实现动画)。但事实并非如此,因为没有规范和标准,两种浏览器对相同功能的实现确完全不一样。为了保持程序的兼容性,程序员必须写一些探查代码以检测JavaScript是运行于哪种浏览器之下,并提供与之对应的脚本。JavaScript陷入了前所未有的混乱,DHTML也因此在人们心中留下了很差的印象。

DOM1的出现

在浏览器厂商进行浏览器大站的同时,W3C结合大家的优点推出了一个标准化的DOM,并于1998年10月完成了第一级 DOM,即:DOM1W3CDOM定义为一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中,DOM由两个模块组成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document对象

DOM2与DOM3

DOM1的基础上DOM2DOM3引入了更多的交互能力,也支持了更高级的XML特性。DOM2DOM3将DOM分为更多具有联系的模块。DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块,在模块包含了众多新类型和新接口:

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

DOM3进一步扩展了DOM,在DOM3中引入了以下模块:

  • DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法
  • DOM验证模块(DOM Validation):定义了验证文档的方法
  • DOM核心的扩展(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base

JavaScript和DOM的产生与发展的更多相关文章

  1. javascript与DOM的渊源

    1. JavaScript的起源 1.1 JavaScript的诞生与发展 JavaScript最初由Netscape的Brendan Eich设计, Netscape在最初将其脚本语言命名为Live ...

  2. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  3. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  4. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  5. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  6. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  7. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  8. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  9. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

随机推荐

  1. 移动端web开发进阶

    三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS ...

  2. [ZigBee] 10、ZigBee之睡眠定时器

    0.概述 睡眠定时器用于设置系统进入和退出低功耗睡眠模式之间的周期.睡眠定时器还用于当进入低功耗睡眠模式时,维持定时器2 的定时. 睡眠定时器的主要功能如下: ● 24 位的定时器正计数器,运行在32 ...

  3. 翻译-Salt与Ansible全方位比较

    原文链接:http://jensrantil.github.io/salt-vs-ansible.html 作者: Jens Rantil 之前某些时候我需要评估配置管理系统.结合从他人得到的意见,我 ...

  4. Log4Net指南

    英文好的直接看这里:http://www.codeproject.com/Articles/140911/log4net-Tutorial 介绍 log4net.是.NET下面最伟大的日志工具之一.简 ...

  5. 品味FastDFS~目录

    回到占占推荐博客索引 参考文献:http://baike.baidu.com/view/973383.htm#sub5143372 分布式文件系统(DFS,Distributed File Syste ...

  6. Node.js入门:模块机制

    CommonJS规范      早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来 ...

  7. Atitit 颜色平均值cloor grb hsv模式的区别对比

    Atitit 颜色平均值cloor grb hsv模式的区别对比 使用hsv模式平均后会变得更加的靓丽一些..2 public class imgT { public static void main ...

  8. Atitit 游戏引擎---物理系统(1)------爆炸效果

    Atitit 游戏引擎---物理系统(1)------爆炸效果 1.1. 动画框架的来源flex,jqueryuijs,anim , cocos2d 1 1.2. Jqueryui的特效库 1 1.3 ...

  9. PCurve - Curve on Surface

    PCurve - Curve on Surface eryar@163.com Abstract. 本文通过给出曲面上曲线PCurve的定义来对OpenCascade中的Curve On Surfac ...

  10. java持久层框架mybatis如何防止sql注入

    看到一篇很好的文章:http://www.jfox.info/ava-persistence-framework-mybatis-how-to-prevent-sql-injection sql注入大 ...