[TOC]
## JavaScript 和 DOM 的產(chǎn)生與發(fā)展
JavaScript歷經(jīng)了從被人誤解到現(xiàn)在的被萬眾矚目的轉(zhuǎn)變。隨著一些JavaScript編程規(guī)范的推出(如:AMD、CMD),其應(yīng)用范圍也從前端一些小功能逐漸擴(kuò)展到后端和一些大項目中。那么,JavaScript從混亂無序到嚴(yán)謹(jǐn)規(guī)范經(jīng)歷的哪些過程,在這些過程中又JavaScript增加了哪些功能特性?
### 1. JavaScript的起源
#### 1.1 JavaScript的誕生與發(fā)展
JavaScript最初由Netscape的Brendan Eich設(shè)計, Netscape在最初將其腳本語言命名為LiveScript,后來Netscape在與Sun合作之后將其改名為JavaScript。由此看來,JavaScript只是出于營銷考慮,看起來像Java實則與Java沒有一點關(guān)系。
在JavaScript出現(xiàn)之前,Web瀏覽器僅是一種能夠顯示超文本文檔的軟件;在JavaScript出現(xiàn)之后,網(wǎng)頁的交互性得到明顯改善,其內(nèi)容也不再局限于簡單的文本。JavaScript第一個版本,即:JavaScript 1.0,在1995年Netscape Navigator 2瀏覽器中推出。
在JavaScript 1.0發(fā)布時,Netscape Navigator瀏覽器還占主宰地位。Microsoft在IE 3.0時發(fā)布了VBScript命名為JScript。面對微軟的競爭,Netscape在與Sun聯(lián)合ECMA(歐洲計算機(jī)制造協(xié)會)對JavaScript語言進(jìn)行了標(biāo)準(zhǔn)化,即:ECMA-262(ECMAScript),也就是我們今天的使用JavaScript語言標(biāo)準(zhǔn),目前最新標(biāo)準(zhǔn)為ECMAScript 6。
1.2 JavaScript的設(shè)計功能
JavaScript最初設(shè)計是作為給非程序人員的腳本語言,JavaScript做為一種解釋型腳本語言,通常只能依賴Web瀏覽器去完成一些操作而不能像動態(tài)語言那樣獨立運行。也正是由于JavaScript的簡單性,使其比較容易的學(xué)習(xí)和使用。
JavaScript向用戶提供了一些操控Web瀏覽器和Web文檔的API,即:BOM(瀏覽器對象模型)和DOM(文檔對象模型)。你可以通過JavaScript調(diào)整瀏覽的寬、高、位置等,同樣你可通過JavaScript調(diào)整Web頁面內(nèi)容的顯示、隱藏、表單提交等。
### 2. DOM的誕生與發(fā)展
#### 2.1 DOM是什么
DOM,文檔對象模型(Document Object Model)。DOM是 W3C(萬維網(wǎng)聯(lián)盟)的標(biāo)準(zhǔn),DOM定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)。在W3C的標(biāo)準(zhǔn)中,DOM是獨于平臺和語言的接口,它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。
W3C DOM由以下三部分組成:
* 核心DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
* XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型
* HTML DOM - 針對 HTML 文檔的標(biāo)準(zhǔn)模型
#### 2.2 DOM的發(fā)展-DOM0、DOM1、DOM2、DOM3的區(qū)別
#### DOM0
JavaScript在早期版本中提供了查詢和操作Web文檔的內(nèi)容API(如:圖像和表單),在JavaScript中定義了定義了'images'、'forms'等,因此我們可以像下這樣訪問第一張圖片或名為“user”的表單:
~~~
document.images[0]
document.forms['user']
~~~
這實際上是未形成標(biāo)準(zhǔn)的試驗性質(zhì)的初級階段的DOM,現(xiàn)在習(xí)慣上被稱為DOM0,即:第0級DOM。由于DOM0在W3C進(jìn)行標(biāo)準(zhǔn)備化之前出現(xiàn),還處于未形成標(biāo)準(zhǔn)的初期階段,這時Netscape和Microsoft各自推出自己的第四代瀏覽器,自此DOM遍開始出各種問題。
#### DOM0與DHTML
Netscape Navigator 4和IE4分別發(fā)布于1997年的6月和10月,這兩種瀏覽器都大幅擴(kuò)展了DOM,使JavaScript的功能大大增加,而此時也開始出現(xiàn)一個新名詞:DHTML。
DHTML是Dynamic HTML(動態(tài)HTML)的簡稱。DHTML并不是一項新技術(shù),而是將HTML、CSS、JavaScript技術(shù)組合的一種描述。即:
* 利用HTML把網(wǎng)頁標(biāo)記為各種元素
* 利用CSS設(shè)置元素樣式及其顯示位置
* 利用JavaScript操控頁面元素和樣式
利用DHTML,看起來可以很容易的控制頁面元素,并實現(xiàn)一此原本很復(fù)雜的效果(如:通過改變元素位置實現(xiàn)動畫)。但事實并非如此,因為沒有規(guī)范和標(biāo)準(zhǔn),兩種瀏覽器對相同功能的實現(xiàn)確完全不一樣。為了保持程序的兼容性,程序員必須寫一些探查代碼以檢測JavaScript是運行于哪種瀏覽器之下,并提供與之對應(yīng)的腳本。JavaScript陷入了前所未有的混亂,DHTML也因此在人們心中留下了很差的印象。
#### DOM1的出現(xiàn)
在瀏覽器廠商進(jìn)行瀏覽器大站的同時,W3C結(jié)合大家的優(yōu)點推出了一個標(biāo)準(zhǔn)化的DOM,并于1998年10月完成了第一級 DOM,即:DOM1。W3C將DOM定義為一個與平臺和編程語言無關(guān)的接口,通過這個接口程序和腳本可以動態(tài)的訪問和修改文檔的內(nèi)容、結(jié)構(gòu)和樣式。
DOM1級主要定義了HTML和XML文檔的底層結(jié)構(gòu)。在DOM1中,DOM由兩個模塊組成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core規(guī)定了基于XML的文檔結(jié)構(gòu)標(biāo)準(zhǔn),通過這個標(biāo)準(zhǔn)簡化了對文檔中任意部分的訪問和操作。DOM HTML則在DOM核心的基礎(chǔ)上加以擴(kuò)展,添加了針對HTML的對象和方法,如:JavaScript中的Document對象
#### DOM2與DOM3
在DOM1的基礎(chǔ)上DOM2和DOM3引入了更多的交互能力,也支持了更高級的XML特性。DOM2和DOM3將DOM分為更多具有聯(lián)系的模塊。DOM2級在原來DOM的基礎(chǔ)上又?jǐn)U充了鼠標(biāo)、用戶界面事件、范圍、遍歷等細(xì)分模塊,而且通過對象接口增加了對CSS的支持。DOM1級中的DOM核心模塊也經(jīng)過擴(kuò)展開始支持XML命名空間。在DOM2中引入了下列模塊,在模塊包含了眾多新類型和新接口:
* DOM視圖(DOM Views):定義了跟蹤不同文檔視圖的接口
* DOM事件(DOM Events):定義了事件和事件處理的接口
* DOM樣式(DOM Style):定義了基于CSS為元素應(yīng)用樣式的接口
* DOM遍歷和范圍(DOM Traversal and Range):定義了遍歷和操作文檔樹的接口
DOM3進(jìn)一步擴(kuò)展了DOM,在DOM3中引入了以下模塊:
* DOM加載和保存模塊(DOM Load and Save):引入了以統(tǒng)一方式加載和保存文檔的方法
* DOM驗證模塊(DOM Validation):定義了驗證文檔的方法
* DOM核心的擴(kuò)展(DOM Style):支持XML 1.0規(guī)范,涉及XML Infoset、XPath和XML Base
> [IT筆錄](http://itbilu.com/javascript/js/Vyxodm_1g.html)
- 步入JavaScript的世界
- 二進(jìn)制運算
- JavaScript 的版本是怎么回事?
- JavaScript和DOM的產(chǎn)生與發(fā)展
- DOM事件處理
- js的并行加載與順序執(zhí)行
- 正則表達(dá)式
- 當(dāng)遇上this時
- Javascript中apply、call、bind
- JavaScript的編譯過程與運行機(jī)制
- 執(zhí)行上下文(Execution Context)
- javascript 作用域
- 分組中的函數(shù)表達(dá)式
- JS之constructor屬性
- Javascript 按位取反運算符 (~)
- EvenLoop 事件循環(huán)
- 異步編程
- JavaScript的九個思維導(dǎo)圖
- JavaScript奇淫技巧
- JavaScript:shim和polyfill
- ===值得關(guān)注的庫===
- ==文章==
- JavaScript框架
- Angular 1.x
- 啟動引導(dǎo)過程
- $scope作用域
- $q與promise
- ngRoute 和 ui-router
- 雙向數(shù)據(jù)綁定
- 規(guī)范和性能優(yōu)化
- 自定義指令
- Angular 事件
- lodash
- Test
