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. iOS之隐藏状态栏

    iOS7中,不仅应用的风格有一定的变化,状态栏变化比较大,我们可以看到UIViewController的状态栏与导航栏基本是一体的.因此UIVIEWCONTROLLER的hide/show状态的方法也 ...

  2. cocos2d-x——在一个cpp中展示多个场景

    //20秒后自动运行下一个场景 runAction( CCSequence::create(CCDelayTime::create(20.0f), CCCallFunc::create(this, c ...

  3. cvSaveImage的第三个参数

    http://stackoverflow.com/questions/801054/opencv-cvsaveimage-jpeg-compression-factor   #define CV_IM ...

  4. C语言下的简易计算器

    #include <stdio.h> #include <math.h> int main() { double data1, data2; char op; == scanf ...

  5. MySQL数据库的存储结构

    --把若干条sql语句封装起来,起个名字,叫做过程,也是没有返回值的函数 --把这个过程存储在数据库中->存储过程 --存储过程的创建过程 create procedure proceduceN ...

  6. 单击改变input的边框颜色

    input边框变色   今天布局页面的时候发现设计稿多了一项要求,就是点击input框的时候要求框框变色,以前没有遇到过,平时很多时候都用的:hover这次想着一样吧,看了之后发现不是想要的效果,ho ...

  7. 使用iTextSharp来填充PDF模板文件

    需求简介:     遇到了这样一个需求:某公司需要为所有用户的培训生成一个培训记录,过程如下:     (1)用户在培训完之后会进入到一个填写信息的界面.     (2)用户填写信息.     (3) ...

  8. AIDL进程间调用与Binder的简单介绍

    Binder是安卓中特有的一种进程间通信(IPC)方式,从Unix发展而来的手段,通信双方必须处理线程同步.内存管理等复杂问题,传统的Socket.匿名通道(Pipe).匿名管道(FIFO).信号量( ...

  9. 个人常用jq方法复习

    $("#elem").on({ mouseover:function(){}, mouseout:function(){}, }); $(ele).closest("di ...

  10. Hibernate+DWR无刷新三级联动

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...