關於DOM & BOM概念的起源（source），方法（methods），內容（contents），應用（application）

DOM（起源）：檔案物件模型（DocumentObjectModel，簡稱DOM），是W3C組織推薦的處理可擴充套件置標語言的標準程式設計介面。DocumentObjectModel的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。

DOM（方法）：DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文件的內容和結構。換句話說，這是表示和處理一個HTML或XML文件的常用方法。有一點很重要，DOM的設計是以物件管理組織（OMG）的規約為基礎的，因此可以用於任何程式語言。Dom技術使得使用者頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的互動性大大地增強。它實際上是以面向物件方式描述的文件模型。DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。可以把DOM認為是頁面上資料和結構的一個樹形表示，不過頁面當然可能並不是以這種樹的方式具體實現。通過JavaScript，可以重構整個HTML文件。可以新增、移除、改變或重排頁面上的專案。要改變頁面的某個東西，JavaScript就需要獲得對HTML文件中所有元素進行訪問的入口。這個入口，連同對HTML元素進行新增、移動、改變或移除的方法和屬性，都是通過文件物件模型來獲得的（DOM）。

使用選擇器定位DOM元素：選擇器API提供了一些方法，通過匹配一組選擇器，快速可以輕鬆地從DOM中檢索節點。這比過去的技術要快得多，例如，有必要在JavaScript的程式碼中使用迴圈來定位您需要查詢的特定專案。Element.

1.NodeSelector介面：本規範增加了兩個新的方法，以任何物件實現，或介面：DocumentDocumentFragmentElement

querySelector報道檢視節點子樹中的第一個匹配節點。如果未找到匹配的節點，則返回。Elementnull

querySelectorAll報道檢視所有遊戲節點子樹中所有匹配節點的節點，如果未找到匹配項則報道檢視空節點。NodeList

ElementNodeList

選擇器API提供了一些方法，通過匹配一組選擇器，快速可以輕鬆地從DOM中檢索節點。這比過去的技術要快得多，例如，有必要在JavaScript的程式碼中使用迴圈來定位您需要查詢的特定專案

2.選擇：選擇器方法接受一個或多個逗號分隔的選擇器以確定應返回哪個或哪些元素。例如，選擇所有段落（p），其CSS類或者是一個文件中的元素warning或者note.

DOM（內容）：DOM是W3C的標準。DOM定義了訪問HTML和XML文件的標準："W3C文件物件模型（DOM）是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。

分級：根據W3CDOM規範，DOM是HTML與XML的應用程式設計介面（API），DOM將整個頁面對映為一個由層次節點組成的檔案。有1級、2級、3級共3個級別。

1級DOM：1級DOM在1998年10月份成為W3C的提議，由DOM核心與DOMHTML兩個模組組成。DOM核心能對映以XML為基礎的文件結構，允許獲取和操作文件的任意部分。DOMHTML通過新增HTML專用的物件與函式對DOM核心進行了擴充套件。

2級DOM：鑑於1級DOM僅以對映文件結構為目標，DOM2級面向更為寬廣。通過對原有DOM的擴充套件，2級DOM通過物件介面增加了對滑鼠和使用者介面事件、範圍、遍歷和層疊樣式表（CSS）的支援。同時也對DOM1的核心進行了擴充套件，從而可支援XML名稱空間。

2級DOM引進了幾個新DOM模組來處理新的介面型別：DOM檢視：描述跟蹤一個文件的各種檢視（使用CSS樣式設計文件前後）的介面；DOM事件：描述事件介面；DOM樣式：描述處理基於CSS樣式的介面；DOM遍歷與範圍：描述遍歷和操作文件樹的介面；

3級DOM：3級DOM通過引入統一方式載入和儲存文件和文件驗證方法對DOM進行進一步擴充套件，DOM3包含一個名為“DOM載入與儲存”的新模組，DOM核心擴充套件後可支援XML1.0的所有內容，包擴XMLInfoset、XPath、和XMLBase。

節點：根據DOM，HTML文件中的每個成分都是一個節點。DOM是這樣規定的：整個文件是一個文件節點。每個HTML標籤是一個元素節點。包含在HTML元素中的文字是文字節點。每一個HTML屬性是一個屬性節點。註釋屬於註釋節點。

Node 層次：節點彼此都有等級關係。HTML文件中的所有節點組成了一個 文件樹（或節點樹）。HTML文件中的每個元素、屬性、文字等都代表著樹中的一個節點。樹起始於文件節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文字節點為止。 DOM（應用）： 註冊事件監聽器：有三種方法可以為DOM元素註冊事件處理程式。

訪問事件介面：事件處理程式可以附加到各種物件，包括DOM元素，文件，視窗顯示物件等。當事件發生時，建立事件物件並將其順序傳遞給事件偵聽器。Event通過可以第作為一個引數傳遞的事件物件從處理函式中訪問該介面。以下簡單示例顯示瞭如何將事件物件傳遞給事件處理函式，並且可以在一個此類函式中使用。

 

 

BOM（起源）：BOM(Browser Object Mode) 是指瀏覽器物件模型，是用於描述這種物件與物件之間層次關係的模型，瀏覽器物件模型提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件。

BOM（方法）：

1. 視窗操作：

moveBy(dx,dy)：把瀏覽器視窗相對當前位置水平移動x個畫素，垂直移動y個畫素。

moveTo(x,y)：移動瀏覽器視窗，使它們的左上角位於使用者螢幕的（x，y）處。

resizeBy(dw,dh)：相對於瀏覽器視窗的當前大小，把它的寬度調整x個畫素，高度調整y個畫素。

resizeTo(w,h)：把視窗的寬度調整為x，高度調整為y。不能為負數。

★IE提供了window.screenLeft和window.screenTop物件來判斷視窗的位置。document.body.offsetWidth和document.body.offsetHeight屬性可獲取視口大小。

★Mozilla提供了window.screenX和window.screenY屬性判斷視窗的位置;windows.innerWidth和windows.innerHeight屬性來判斷視口的大小;window.outerWidth和window.outerHeight屬性判斷瀏覽器視窗自身的大小。

2. 導航和開啟新視窗：

開啟新視窗：window.open("新視窗的URL","名字","特性字串");

各種設定：

Left：視窗的左座標,不能為負數；

Top：視窗的上座標,不能為負數；

Height：視窗的高度,不能小於100；

Width：視窗的寬度,不能小於100；

Resizable：判斷窗體是否能拖動,預設為no；

Scrollable：判斷窗體不要顯示內容時是否滾動，預設為no；

Toolbar：判斷是否顯示工具欄，預設為no；

Status：判斷是否顯示狀態列，預設為no；

location：斷是否顯示位址列，預設為no。

關閉自身窗體：window.close（）；

3. 系統對話方塊：

警告框：alert("XXX");  

確認框：confirm("XXX");    

輸入框：prompt("'XXX") 

4．狀態列

window.defaultStatus=”XXXXXX”

wingdow.status=”XXXXXX”

5. 時間間隔和暫停：

setTimeout();等待XX毫秒後執行.

clearTimeout();取消

setInterval(); 等待XX毫秒後執行

clearInterval();取消

6. 歷史：

後退一頁：window.history.go(-1);或history.back()

前進一頁：window.history.go(1); 或history.forward()

二、document物件：

document物件的一些通用屬性：

1. lastModified：最後修改的日期，是字串；

2. referrer：瀏覽器歷史中後退一個位置的URL；

3. title：標籤中顯示文字；

4.URL：當前載入的頁面的URL。

改變框架標題：top.document.title=”新的頁面標題”；

如把視窗導航到新頁面：

document.URL = "http://www.baidu.com";

BOM（內容）： 在JavaScript中物件之間並不是獨立存在的，物件與物件之間有著層次關係。如Document物件是Window物件的子物件，Window物件是Document物件，它表示整個瀏覽器視窗。 BOM並不是W3C中的標準，因此，不同的瀏覽器所支援的BOM中的物件、物件的屬性和方法都有可能不同。Document物件下有很多子物件，因此Document物件是一個十分重要的物件。事實上，大多數瀏覽器都支援Document物件。在W3C正式定義DOM之前，BOM中的Document分支就已經被眾多瀏覽器支援。DOM被正式定義之後，分為了三個層次，分別為1級DOM（DOM Level 1）、2級DOM（DOM Level 2）和3級DOM（DOM Level 3）。而BOM中的Document分支被稱為0級DOM（DOM Level 0），因為該分支定義了文件功能的基本功能。

Document物件：該物件代表瀏覽器視窗中所載入的文件。使用Document物件可以操作文件中的內容。在整個BOM中，只有Document物件是與HTML文件的內容相關的。

Frames陣列：該陣列代表瀏覽器視窗中的框架。HTML中允許將一個瀏覽器視窗分為多個框架，每個框架中可以載入一個HTML文件。在這種框架頁中，每一個框架都是Frames陣列中的一個元素。而Frames陣列中的每一個元素都是一個Window物件。

History物件：該物件代表當前瀏覽器視窗的瀏覽歷史。通過該物件可以將當前瀏覽器視窗中的文件前進或後退到某一個已經訪問過的URL（統一資源定位符）。

Location物件：該物件代表當前文件的URL。URL分為幾個部分，如協議部分、主機部分、埠部分等。使用Location物件可以分別獲得這些部分，並且可以通過修改這些部分的值來載入一個新文件。

Navigator物件：該物件是瀏覽器物件，代表了瀏覽器的資訊。該物件與Window物件不同，Window物件可以用於控制瀏覽器視窗的一些屬性，如瀏覽器視窗大小、位置等。而Navigator物件包含的是瀏覽器的資訊，如瀏覽器的名稱、版本號等。

Screen物件：該物件代表當前顯示器的資訊。使用Screen物件可以獲得使用者顯示器的解析度、可用顏色數量等資訊。

Document物件代表HTML文件，而HTML文件中包括了有很多元素，BOM也將這些元素看成了不同的物件。

Anchors陣列：該陣列代表了文件中的所有錨。陣列中的每一個元素都是一個錨物件。每一個錨物件都對應著HTML文件中的一個包含name屬性的標籤，通過錨物件可以獲得錨的命名，以及超連結中的文字。

Applets陣列：該陣列代表了嵌在網頁中的所有小程式。陣列中的每一個元素都是一個Applet物件，通過Applet物件可以獲得Java小程式的公有欄位。

Embeds陣列：與Applets類似，但建議使用Embeds陣列。

BOM體系結構Forms陣列：該陣列代表文件中的所有表單。陣列中的每一個元素都是一個Form物件。每一個Form物件都對應著HTML文件中的一個<form>標籤。通過Form物件可以獲得表單中的各種資訊，也可以提交或重置表單。由於表單中還包括了很多表單元素，因此，Form物件的子物件還可以對這些表單元素進行引用，以完成更具體的應用。

Images陣列：該陣列代表文件中的所有圖片。陣列中的每一個元素都是一個Image物件。每一個Image物件都對應著HTML文件中的一個<img>標籤。通過Image物件可以獲得圖片的各種資訊。

Links陣列：該陣列代表文件中的所有超連結。陣列中的每一個元素都是一個Link物件。每一個Link物件都對應著HTML文件中的一個包含href屬性的<a>標籤，通過Link物件可以獲得超連結中URL的各部分資訊。

Location物件：該物件與Window物件中的Location物件完全相同。由於該物件與HTML文件並沒有太大關係，因此，該物件是反對使用的物件，建議使用Window物件的Location子物件。

 

BOM（應用）：BOM是browser object model的縮寫，簡稱瀏覽器物件模型，它的作用有：

1. 彈出新的瀏覽器視窗、移動、關閉瀏覽器視窗及調整視窗大小；

2. 提供WEB瀏覽器詳細資訊的導航物件；

3. 提供裝載到瀏覽器中頁面的詳細資訊的定位物件；

4. 提供使用者螢幕分辯率詳細資訊的螢幕物件；

5. 對cookie的支援