1. 程式人生 > >關於dom&bom

關於dom&bom

等等 ole 而且 orm csdn frame model title 事情

javascript 有三部分構成,ECMAScript,DOM和BOM,根據宿主(瀏覽器)的不同,具體的表現形式也不盡相同,ie和其他的瀏覽器風格迥異。

1. DOM 是 W3C的標準;[所有瀏覽器公共遵守的標準]
2. BOM 是 各個瀏覽器廠商根據 DOM
在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
3. window 是 BOM對象,而非js對象;

DOM(文檔對象模型)是 HTML 和 XML 的應用程序接口(API)。

BOM 主要處理瀏覽器窗口和框架,不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括:

彈出新的瀏覽器窗口

移動、關閉瀏覽器窗口以及調整窗口大小

提供 Web 瀏覽器詳細信息的定位對象

提供用戶屏幕分辨率詳細信息的屏幕對象

對 cookie 的支持

IE 擴展了 BOM,加入了ActiveXObject類,可以通過JavaScript實例化ActiveX對象

javacsript是通過訪問BOM(Browser Object Model)對象來訪問、控制、修改客戶端(瀏覽器),由於BOM的window包含了document,window對象的屬性和方法是直接可以使用而且被感知的,因此可以直接使用window對象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因為document對象又是DOM(Document Object Model)模型的根節點。可以說,BOM包含了DOM(對象),瀏覽器提供出來給予訪問的是BOM對象,從BOM對象再訪問到DOM對象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。其中
DOM包含:window

Window對象包含屬性:document、location、navigator、screen、history、frames

Document根節點包含子節點:forms、location、anchors、images、links

從window.document已然可以看出,DOM的最根本的對象是BOM的window對象的子對象。

區別:DOM描述了處理網頁內容的方法和接口,BOM描述了與瀏覽器進行交互的方法和接口

1.1 DOM, DOCUMENT, BOM, WINDOW 區別

DOM 全稱是 Document Object Model,也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口,是HTML和XML的API,DOM把整個頁面規劃成由節點層級構成的文檔。針對XHTML和HTML的DOM。這個DOM定義了一個HTMLDocument和HTMLElement做為這種實現的基礎,就是說為了能以編程的方法操作這個 HTML 的內容

(比如添加某些元素、修改元素的內容、刪除某些元素),我們把這個 HTML 看做一個對象樹(DOM樹),它本身和裏面的所有東西比如 <div></div> 這些標簽都看做一個對象,每個對象都叫做一個節點(node),節點可以理解為 DOM 中所有 Object 的父類。

技術分享圖片

DOM 有什麽用?就是為了操作 HTML 中的元素,比如說我們要通過 JS 把這個網頁的標題改了,直接這樣就可以了:

document.title = ‘how to make love‘;

這個 API 使得在網頁被下載到瀏覽器之後改變網頁的內容成為可能。

document

當瀏覽器下載到一個網頁,通常是 HTML,這個 HTML 就叫 document(當然,這也是 DOM 樹中的一個 node),從上圖可以看到,document 通常是整個 DOM 樹的根節點。這個 document 包含了標題(document.title)、URL(document.URL)等屬性,可以直接在 JS 中訪問到。

在一個瀏覽器窗口中可能有多個 document,例如,通過 iframe 加載的頁面,每一個都是一個 document。

在 JS 中,可以通過 document 訪問其子節點(其實任何節點都可以),如

document.body;document.getElementById(‘xxx‘);


BOM

BOM 是 Browser Object Model,瀏覽器對象模型。


剛才說過 DOM 是為了操作文檔出現的接口,那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現的接口。

瀏覽器可以做什麽呢?比如跳轉到另一個頁面、前進、後退等等,程序還可能需要獲取屏幕的大小之類的參數。

所以 BOM 就是為了解決這些事情出現的接口。比如我們要讓瀏覽器跳轉到另一個頁面,只需要

location.href = "http://www.xxxx.com";


這個 location 就是 BOM 裏的一個對象。

window

window 也是 BOM 的一個對象,除去編程意義上的“兜底對象”之外,通過這個對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關閉當前窗口:

window.close();

DOM 是為了操作文檔出現的 API,document 是其的一個對象;
BOM 是為了操作瀏覽器出現的 API,window 是其的一個對象。

關於dom&bom