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 --- javascript与DOM

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

  2. JavaScript与DOM

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

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

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

  4. JavaScript与DOM的关系

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

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

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

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

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

  7. JavaScript HTML DOM 元素(节点)

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

  8. JavaScript HTML DOM EventListener

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

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

随机推荐

  1. xmpp搭建服务器

    二.环境配置1.安装mysql2.修改mysql的帐户的密码>sqlite(移动平台) ,是没有密码直接连接数据库>mysql sqlServer (服务端的数据库) 是有帐户和密码  默 ...

  2. ThreadPoolExecutor运转机制详解

    ThreadPoolExecutor运转机制详解 - 走向架构师之路 - 博客频道 - CSDN.NET 最近发现几起对ThreadPoolExecutor的误用,其中包括自己,发现都是因为没有仔细看 ...

  3. backboneJs 导图

  4. asp.net select Case条件语句的使用方法

    原文:http://www.111cn.net/net/vb-net/38548.htm 如果 testexpression 与任何 Case expressionlist 表达式匹配 ,则执行此 C ...

  5. 浏览器userAgent大全

    iPhone ●iOSMozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Versi ...

  6. apktool反编译工具

    几个报错的解决办法 apktool反编译时经常会出现下面的信息 Input file was not found or was not readable. Destination directory ...

  7. Linux 最常用命令小结

    1. 文件共享 1).将windows 系统下的文件夹共享到linux的方法: 安装filezilla,设置连接linux 服务器.将文件上传. 2).mRemote 机器连接管理 2. 文件管理命令 ...

  8. Objective-C 【点语法】

    ------------------------------------------- 点语法的使用 // //  点语法的使用 // //  点语法:   xcode的一种特性,xcode帮我们做代 ...

  9. (转)操作型数据库的春天:MongoDB 1.5亿美元融资背后的故事

    大部分融资都要耗时数月,但非关系式数据库MongoDB仅用3周时间就完成了1.5亿美元的融资.为什么这个进程会这么快,MongoDB CEO Max Schireson在接受采访时说,这是因为投资者看 ...

  10. JAVA静态和非静态内部类

    JAVA静态和非静态内部类 一直对java的静态和非静态内部类的东东理解不清楚,今天测试了一下,下面把测试结果记录一下,加深印象.用于以后查找. 直接上代码. package com.test.xml ...