1.0 完整的javascript實現(xiàn)
- ECMAScript 核心
- DOM 文檔對象模型
- BOM 瀏覽器對象模型
DOM是一個使程序和腳本有能力動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式的平臺和語言中立的接口。而BOM定義了JavaScript可以進(jìn)行操作的瀏覽器的各個功能部件的接口。（引自別處）
1.1ECMAScript 規(guī)定內(nèi)容
- 語法/類型/語句/操作符/關(guān)鍵字/保留字/對象
提供核心語言功能。
1.2文檔對象模型 DOM
文檔對象模型，提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口。
是針對XML但經(jīng)過擴(kuò)展的HTML的應(yīng)用程序編程接口。DOM把整個頁面映射為一個多層節(jié)點(diǎn)結(jié)構(gòu)，HTML和XML頁面中每個組成部分都是某種類型的節(jié)點(diǎn)，這些節(jié)點(diǎn)又包含著多種不同類型的數(shù)據(jù)。
DOM級別之DOM1級別
- DOM核心（DOM Core）：規(guī)定如何映射基于XML的文檔結(jié)構(gòu)，以便訪問和操作文檔。
- DOM HTML：在核心的基礎(chǔ)上擴(kuò)展針對HTML的對象和方法。
DOM級別之DOM2級別
- DOM視圖/DOM事件/DOM樣式/DOM遍歷和范圍
。。。DOM3等
1.3瀏覽器對象模型
HTML5發(fā)布后才有的規(guī)范，只處理瀏覽器窗口和框架
BOM，提供與瀏覽器交互的方法和接口。
- 彈出新的瀏覽器窗口
- 移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口大?。s放）
- 提供瀏覽器詳細(xì)信息的navigator對象（導(dǎo)航）
- 提供 Web 瀏覽器所加載頁面的詳細(xì)信息的定位對象（location對象）
- 提供用戶屏幕分辨率詳細(xì)信息的屏幕對象（screen對象）
- 對 cookie 的支持
- IE 擴(kuò)展了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 實例化 ActiveX 對象
詳細(xì)總結(jié)
JavacSript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，由于BOM的window對象包含了document屬性，window對象的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window對象的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。因為document對象又是DOM（Document Object Model）模型的根節(jié)點(diǎn)。可以說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而JavaScript可以操作瀏覽器以及瀏覽器讀取到的文檔。
區(qū)別：DOM描述了處理網(wǎng)頁內(nèi)容的方法和接口，BOM描述了與瀏覽器進(jìn)行交互的方法和接口。
window 代表了一個新開的窗口
location 代表了地址欄對象。
-
screen 代表了整個屏幕的對象
Window對象包含屬性：document、location、navigator、screen、history、frames Document根節(jié)點(diǎn)包含子節(jié)點(diǎn)：forms、location、anchors、images、links
認(rèn)識DOM
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
- 元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。
- 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://www.baidu.com"。
| 節(jié)點(diǎn)屬性 | 返回值 |
|---|---|
| nodeName | 返回一個字符串，表示節(jié)點(diǎn)名 |
| nodeType | 返回一個整數(shù)，表示節(jié)點(diǎn)類型 |
| nodeValue | 返回給定節(jié)點(diǎn)的當(dāng)前值 |
| 遍歷節(jié)點(diǎn)樹 | 返回值 |
|---|---|
| childNodes | 返回一個數(shù)組，這個數(shù)組由給定元素的子節(jié)點(diǎn)構(gòu)成 |
| firstChild | 返回第一個節(jié)點(diǎn) |
| lastChild | 返回最后一個節(jié)點(diǎn) |
| parentNode | 返回一個給定節(jié)點(diǎn)的父節(jié)點(diǎn) |
| nextSibling | 返回給定節(jié)點(diǎn)的下一個子節(jié)點(diǎn) |
| previousSibling | 返回給定節(jié)點(diǎn)的上一個子節(jié)點(diǎn) |
| DOM操作 | 返回值 |
|---|---|
| creatElement(element) | 創(chuàng)建一個新的元素節(jié)點(diǎn) |
| creatTextNode() | 創(chuàng)建一個包含給定文本的新文本節(jié)點(diǎn) |
| appendChild() | 指定節(jié)點(diǎn)的最后一個節(jié)點(diǎn)列表后添加一個新的子節(jié) |
| insertBefore() | 將一個給定節(jié)點(diǎn)插入到一個給定元素節(jié)點(diǎn)的給定子節(jié)點(diǎn)的前面 |
| removeChild() | 從一個給定元素中刪除子節(jié)點(diǎn) |
| replaceChild() | 把一個給定父元素里的一個子節(jié)點(diǎn)替換為另外一個節(jié)點(diǎn) |
DOM通過創(chuàng)建樹來表示文檔，描述了處理網(wǎng)頁內(nèi)容的方法和接口，從而使開發(fā)者對文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力，用DOM API可以輕松地刪除、添加和替換節(jié)點(diǎn)。
后續(xù)。。。訪問節(jié)點(diǎn)/事件等。。。
