再談BOM和DOM(1):BOM與DOM概述
JavaScript的實現包括以下3個部分：
-
ECMAScript(核心)：描述了JS的語法和基本物件。
-
瀏覽器物件模型（BOM）：與瀏覽器互動的方法和介面
-
文件物件模型 （DOM）：處理網頁內容的方法和介面
DOM-文件物件模型
DOM（文件物件模型）是HTML和XML的應用程式介面，是操作文件出現的 API，是為了操作文件出現的介面。DOM代表著被載入到瀏覽器窗口裡的當前網頁：瀏覽器向我們提供了當前網頁的地圖（或者說模型），而我們可以通過js去讀取這張地圖。
-
D（文件-document）可以理解為整個Web載入的網頁文件
-
O（物件-object）可以理解為類似window物件只來的東西，可以呼叫屬性和方法，這裡我們說的是document物件，
-
M（模型-model）可以理解為網頁文件的樹形結構，DOM樹由節點構成
BOM-瀏覽器物件模型
BOM 是 Browser Object Model，瀏覽器物件模型，BOM主要是處理瀏覽器視窗和框架，不過通常瀏覽器特定的JavaScript擴充套件都被看做 BOM 的一部分。這些擴充套件包括：
-
彈出新的瀏覽器視窗：alert、confirm、prompt
-
移動、關閉瀏覽器視窗以及調整視窗大小：scrollTo、moveTo、resizeTo等
-
提供 Web 瀏覽器詳細資訊的定位物件：Navigator、History
-
提供使用者螢幕解析度詳細資訊的螢幕物件：Screen
-
對 cookie 的支援：cookie
-
IE 擴充套件了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 例項化 ActiveX 物件
window物件對應著瀏覽器視窗本身，這個物件的屬性和方法通常被稱為BOM
DOM包含：window
-
Window物件包含屬性：document、location、navigator、screen、history、frames
-
Document根節點包含子節點：forms、location、anchors、images、links
從window.document已然可以看出，DOM的最根本的物件是BOM的window物件的子物件。
區別：DOM描述了處理網頁內容的方法和介面，BOM描述了與瀏覽器進行互動的方法和介面。
根據W3C DOM規範，DOM是HTML與XML的應用程式設計介面（API），DOM將整個頁面對映為一個由層次節點組成的檔案。有1級、2級、3級共3個級別。
BOM與DOM的對比
-
BOM為了處理瀏覽器視窗和框架
-
DOM為了操作文件出現的介面，是 HTML 和 XML 的應用程式介面（API）。
-
DOM是 W3C 的標準; [所有瀏覽器公共遵守的標準]
-
BOM 是 各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
-
window 是 BOM 物件，而非 js 物件；
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
BOM和DOM的結構關係示意圖
參考文章：
ECMAScript、BOM、DOM（核心、瀏覽器物件模型與文件物件模型）https://www.cnblogs.com/best/p/8028168.html
JavaScript學習總結（三）BOM和DOM詳解https://segmentfault.com/a/1190000000654274
Javascript操作BOM和DOM詳解（1）https://blog.csdn.net/openbox2008/article/details/85260063
JavaWeb學習總結：JavaScript（BOM和DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198
HTML DOM Event 物件https://www.w3school.com.cn/jsref/dom_obj_event.asp
XML DOM - Element 物件https://www.w3school.com.cn/xmldom/dom_element.asp
JAVAScript中DOM與BOM的差異分析 https://www.cnblogs.com/fjner/p/5892325.html
轉載本站文章《再談BOM和DOM(1):BOM與DOM概述》,
請註明出處：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8346.html