JS中BOM和DOM之間的關係

1、Javascript組成
JavaScript的實現包括如下3個部分：
一、核心（ECMAScript）：描述了JS的語法和基本對象。
二、文檔對象模型 （DOM）：處理網頁內容的方法和接口。
三、瀏覽器對象模型（BOM）：與瀏覽器交互的方法和接口。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　BOM和DOM的結構關係示意圖

 

 

 

2、BOM（瀏覽器對象模型）

一、window對象
說明：BOM的核心對象是window，他表示瀏覽器的一個實例。他既是經過JavaScript訪問瀏覽器窗口的一個接口，又是ECMScript規定的Global對象。

全局做用域

    全局變量不能經過delete操做符刪除；

    window對象上的定義可刪除；

BOM（Browser Object Model）

瀏覽器對象模型：將瀏覽器的各個組成部分封裝成爲對象

 

location對象

location對象：表示載入窗口的URL，也可用window.location引用它

location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm

location.portocol //URL中使用的協議，即雙斜槓以前的部分，如http

location.host //服務器的名字，如www.wrox.com

location.hostname //一般等於host，有時會省略前面的www

location.port //URL聲明的請求的端口，默認狀況下，大多數URL沒有端口信息，如8080

location.pathname //URL中主機名後的部分，如/pictures/index.htm

location.search //執行GET請求的URL中的問號後的部分，又稱查詢字符串，如?param=xxxx

location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1

location.assign("http:www.baidu.com");//同location.href，新地址都會被加到瀏覽器的歷史棧中

location.replace("http:www.baidu.com");//同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能經過back和forward訪問

location.reload(true|false);//從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false

 

 

navigator對象

navigator`對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用，也可用window.navigator引用它

navigator.appCodeName`//瀏覽器代碼名的字符串表示

navigator.appName //官方瀏覽器名的字符串表示

navigator.appVersion//瀏覽器版本信息的字符串表示

navigator.cookieEnabled//若是啓用cookie返回true，不然返回false

navigator.javaEnabled//若是啓用java返回true，不然返回false

navigator.platform//瀏覽器所在計算機平臺的字符串表示

navigator.plugins //安裝在瀏覽器中的插件數組

navigator.taintEnabled//若是啓用了數據污點返回true，不然返回false

navigator.userAgent//用戶代理頭的字符串表示 

 

 

screen對象

screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它 screen.width/height //屏幕的寬度與高度，以像素計 screen.availWidth/availHeight//窗口可使用的屏幕的寬度和高度，以像素計 screen.colorDepth //用戶表示顏色的位數，大多數系統採用32位 window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight);//填充用戶的屏幕 

 

History:歷史記錄對象

back()：加載 history 列表中的前一個 URL

forward()：加載 history 列表中的下一個 URL

go(參數)：加載 history 列表中的某個具體頁面（參數：前進(正數)或後退(負數)幾個歷史記錄）

length：返回當前窗口歷史列表中的 URL 數量。

 

3、DOM

Document Object Model 文檔對象模型：將標記語言文檔的各個組成部分封裝爲對象。可使用這些對象對標記語言文檔進行CRUD的動態操做。 W3C標準中，DOM被分爲三個不一樣的部分： 1. 核心DOM -針對任何結構化文檔的標準模型 2. XML DOM -針對XML文檔的標準模型 3. HTML DOM -針對HTML文檔的標準模型

Document:文檔對象

獲取：在HTML DOM模型中能夠經過window對象來獲取

獲取Element對象方法：

getElementById()：根據id屬性值獲取元素對象。

 

getElementsByTagName()：根據標籤名稱獲取元素對象們，返回值是一個數組

 

getElementsByClassName()：根據Class屬性值獲取元素對象們，返回值是一個數組

 

getElementsByName()：根據name屬性值獲取元素對象們，返回值是一個數組

 

建立其餘DOM對象方法：

createAttribute(name)：建立Attribute屬性對象

 

createComment()：建立Comment註釋對象

 

createElement()：建立Element元素對象

 

createTextNode()：建立Text文本對象

Element:元素對象

屬性：

previousSibling：獲取該元素的前一個節點nextSibling：獲取該元素的後一個節點innerHTML：能夠獲取標籤內全部的內容，包括標籤innerText：能夠獲取標籤內全部的文本內容，不包括標籤方法：

removeAttribute()：刪除屬性setAttribute()：設置屬性

 

document對象

document對象：其實是window對象的屬性，document == window.document爲true，是惟一一個既屬於BOM又屬於DOM的對象

document.lastModified//獲取最後一次修改頁面的日期的字符串表示

document.referrer //用於跟蹤用戶從哪裏連接過來的

document.title //獲取當前頁面的標題，可讀寫

document.URL //獲取當前頁面的URL，可讀寫

document.anchors[0]或document.anchors["anchName"]//訪問頁面中全部的錨

document.forms[0]或document.forms["formName"]//訪問頁面中全部的表單

document.images[0]或document.images["imgName"]// 訪問頁面中全部的圖像

document.links [0]或document.links["linkName"]//訪問頁面中全部的連接

document.applets [0]或document.applets["appletName"]//訪問頁面中全部的Applet

document.embeds [0]或document.embeds["embedName"]//訪問頁面中全部的嵌入式對象

document.write(); 或document.writeln();//將字符串插入到調用它們的位置

 

 

總結DOM和BOM區別：

DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口
1) DOM是W3C的標準[全部瀏覽器都遵循的標準];
2) DOM（文檔對象模型）是 HTML 和 XML 的應用程序接口（API）;
3) BOM各個瀏覽器廠商根據DOM在各自瀏覽器上的實現;[表現爲不一樣瀏覽器定義有差異,實現方式不一樣;
4) BOM 主要處理瀏覽器窗口和框架，不過一般瀏覽器特定的 JavaScript 擴展都被看作 BOM 的一部分。這些擴展包括
window(窗口)、location（地址欄內容相關）、history（歷史）、screen（屏幕）、navigator（有不少瀏覽器相關的內容，一般判斷瀏覽器類型都是經過這個對象）
DOM 是爲了操做文檔出現的 API，document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。