最全的DOM和BOM的解釋分析

        今天我們就來看看DOM和BOM。什麼是DOM和BOM？

DOM（document object model）：文檔對象模型，提供操做頁面元素的方法和屬性

BOM（browser object model）；瀏覽器對象模型，提供一些屬性和方法能夠操做瀏覽器

我想不少的人都看過這樣的官方的解釋，那具體的如何咱們一塊兒來分析下。

一  什麼是BOM和DOM？

       Javascript 由三部分構成，ECMAScript，DOM和BOM。根據宿主（瀏覽器）的不一樣，具體的表現形式也不盡相同，ie和其餘的瀏覽器風格迥異,IE 擴展了 BOM，加入了 ActiveXObject 類，能夠經過 JavaScript 實例化 ActiveX 對象。 

1. ECMAScript(核心) 　　描述了JS的語法和基本對象

2. DOM 是文檔對象模型，處理網頁內容的方法和接口。是W3C 的標準； [全部瀏覽器公共遵照的標準] 

3. BOM 是瀏覽器對象模型，提供與瀏覽器交互的方法和接口。各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現爲不一樣瀏覽器定義有差異,實現方式不一樣] 

1） DOM的介紹

       DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文檔。

        這個DOM定義了一個HTMLDocument和HTMLElement作爲這種實現的基礎,就是說爲了能以編程的方法操做這個 HTML 的內容（好比添加某些元素、修改元素的內容、刪除某些元素），咱們把這個 HTML 看作一個對象樹（DOM樹），它自己和裏面的全部東西好比 <div></div> 這些標籤都看作一個對象，每一個對象都叫作一個節點（node），節點能夠理解爲 DOM 中全部 Object 的父類。

2） BOM的介紹

       BOM 是 Browser Object Model，瀏覽器對象模型。剛纔說過 DOM 是爲了操做文檔出現的接口，那 BOM 顧名思義其實就是爲了控制瀏覽器的行爲而出現的接口。

       瀏覽器能夠作什麼呢？好比跳轉到另外一個頁面、前進、後退等等，程序還可能須要獲取屏幕的大小之類的參數。因此 BOM 就是爲了解決這些事情出現的接口。好比咱們要讓瀏覽器跳轉到另外一個頁面，只須要location.href = "http://www.xxxx.com";這個 location 就是 BOM 裏的一個對象。

二   DOM和BOM的區別

DOM區域的：  

5區（就是document。由web開發人員嘔心瀝血寫出來的一個文件夾，裏面有index.html，CSS和JS的，部署在服務器上，咱們能夠經過瀏覽器的地址欄輸入URL而後回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。）

 BOM區域的：  

1區（瀏覽器的標籤頁，地址欄，搜索欄，書籤欄，窗口放大還原關閉按鈕，菜單欄等等） 

2區（滾動條scroll bar） 

3區（瀏覽器的右鍵菜單） 

4區（document加載時的狀態欄，顯示http狀態碼等） 

三  DOM和BOM的聯繫

       BOM的核心是Window，而Window對象又具備雙重角色，它既是經過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window做爲其global對象。

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

Document根節點包含子節點：forms、embeds、anchors、images、links

從window.document已然能夠看出，DOM的最根本的對象是BOM的window對象的子對象。

       因爲BOM的window包含了document，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。

      能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。

結束語： 作一個努力、勤奮、主動的前端工程師