JavaScript和DOM的产生与发展
首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html
非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别。让我知道了DOM0级并不存在,而我们现在常用CoreDOM、HTML-DOM都属于DOM1级,而事件的接口,则是从DOM2级开始引入。
====================== 具体内容 =====================
JavaScript历经了从被人误解到现在的被万众瞩目的转变。随着一些JavaScript编程规范的推出(如:AMD、CMD),其应用范围也从前端一些小功能逐渐扩展到后端和一些大项目中。那么,JavaScript从混乱无序到严谨规范经历的哪些过程,在这些过程中又JavaScript增加了哪些功能特性?
1. JavaScript的起源
1.1 JavaScript的诞生与发展
JavaScript
最初由Netscape
的Brendan 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
浏览器还占主宰地位。Microsoft
在IE 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
定义了访问HTML
和XML
文档的标准。在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
。由于DOM0
在W3C
进行标准备化之前出现,还处于未形成标准的初期阶段,这时Netscape
和Microsoft
各自推出自己的第四代浏览器,自此DOM遍开始出各种问题。
DOM0与DHTML
Netscape Navigator 4
和IE4
分别发布于1997年的6月和10月,这两种浏览器都大幅扩展了DOM
,使JavaScript
的功能大大增加,而此时也开始出现一个新名词:DHTML
。
DHTML
是Dynamic HTML
(动态HTML)的简称。DHTML
并不是一项新技术,而是将HTML、CSS、JavaScript技术组合的一种描述。即:
- 利用HTML把网页标记为各种元素
- 利用CSS设置元素样式及其显示位置
- 利用JavaScript操控页面元素和样式
利用DHTML,看起来可以很容易的控制页面元素,并实现一此原本很复杂的效果(如:通过改变元素位置实现动画)。但事实并非如此,因为没有规范和标准,两种浏览器对相同功能的实现确完全不一样。为了保持程序的兼容性,程序员必须写一些探查代码以检测JavaScript是运行于哪种浏览器之下,并提供与之对应的脚本。JavaScript
陷入了前所未有的混乱,DHTML
也因此在人们心中留下了很差的印象。
DOM1的出现
在浏览器厂商进行浏览器大站的同时,W3C
结合大家的优点推出了一个标准化的DOM
,并于1998年10月完成了第一级 DOM
,即:DOM1
。W3C
将DOM
定义为一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
DOM1
级主要定义了HTML和XML文档的底层结构。在DOM1
中,DOM由两个模块组成:DOM Core
(DOM核心)和DOM HTML
。其中,DOM Core
规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML
则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document
对象
DOM2与DOM3
在DOM1
的基础上DOM2
和DOM3
引入了更多的交互能力,也支持了更高级的XML特性。DOM2
和DOM3
将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的产生与发展的更多相关文章
- javascript与DOM的渊源
1. JavaScript的起源 1.1 JavaScript的诞生与发展 JavaScript最初由Netscape的Brendan Eich设计, Netscape在最初将其脚本语言命名为Live ...
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
随机推荐
- Java虚拟机7:内存分配原则
前言 对象的内存分配,往大的方向上讲,就是在堆上分配,少数情况下也可能会直接分配在老年代中,分配的规则并不是百分之百固定的,其细节决定于当前使用的是哪种垃圾收集器组合,当然还有虚拟机中与内存相关的参数 ...
- Nim语言的模块化编程
前言 Nim支持把一大段程序分成若干个模块 一个模块就是一个源代码文件 每个模块都拥有它自己的名称空间 模块化可以起到封装(信息隐藏)和分步编译的作用 一个模块可以通过import语句获得另一个模块的 ...
- [源码]NumberToUpper 数字转中文
使用时需开启unsafe选项 构造函数有4个参数 number : 数字文本 isSimplified : 是否只使用简体中文,默认:false isMoney : 是否是金额模式(忽略小数点后3位, ...
- Sizeof的计算看内存分配
本文记录了有关sizeof的一些计算,主要有下面的四种情况:(如有错误,敬请留言) 使用sizeof()计算普通变量所占用的内存空间 sizeof计算类对象所占用空间的大小-用到了字节对齐 sixeo ...
- NodeJS系列~第一个小例子,实现了request.querystring功能
返回目录 百度百科上: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始,在Node中,Http是首要的.Node为创建http服务器作了优化,所以在网上 ...
- 爱上MVC系列~前端验证与后端数据有效性验证
回到目录 有一句话,在10年前就是真理,到现在也一直都是,“前端验证可以没有,但后端验证必须要有”,这句话相信大家都没有意见吧,前端验证一般指通过JS方式实现的,友好的,个性的验证方式,而后端验证是指 ...
- .net生成随机字符串
生成随机字符串的工具类: /// <summary> /// 随机字符串工具类 /// </summary> public class RandomTools { /// &l ...
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染
在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...
- cordova 版本
cordova 版本 npm install cordova@xxxx https://travis-ci.org/apache/cordova-cli https://www.npmjs.com/p ...
- WP中的语音识别(下):语音指令
除了系统集成的可以用于搜索.启动应用程序等语音命令外,在我们的应用程序内部还能自己定义语音指令,使得我们的APP能与语音操控结合得更加完全. 语音指令是通过一个XML文件来定义的.比如,咱小舅子开了家 ...