DOM, DOCUMENT, BOM, WINDOW 區別
DOM 是為了操作文檔出現的 API，document 是其的一個對象；
BOM 是為了操作瀏覽器出現的 API，window 是其的一個對象。
BOM是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器本身進行操作，而后者是對瀏覽器（可看成容器）內的內容進行操作
歸DOM管的：
E區（就是你說的document啦。由web開發人員嘔心瀝血寫出來的一個文件夾，里面有index.html，CSS和JS什么鬼的，部署在服務器上，我們可以通過瀏覽器的地址欄輸入URL然后回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。
歸BOM管的：
A區（瀏覽器的標簽頁，地址欄，搜索欄，書簽欄，窗口放大還原關閉按鈕，菜單欄等等）
B區（瀏覽器的右鍵菜單）
C區（document加載時的狀態欄，顯示http狀態碼等）
D區（滾動條scroll bar）
2.1 DOM
DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規划成由節點層級構成的文檔。
這個DOM定義了一個HTMLDocument和HTMLElement做為這種實現的基礎,就是說為了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如 <div></div> 這些標簽都看做一個對象，每個對象都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
DOM 有什么用？就是為了操作 HTML 中的元素，比如說我們要通過 JS 把這個網頁的標題改了，直接這樣就可以了：
document.title = 'how to make love';
這個 API 使得在網頁被下載到瀏覽器之后改變網頁的內容成為可能。
2.2 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');
2.3 BOM
BOM 是 Browser Object Model，瀏覽器對象模型。
剛才說過 DOM 是為了操作文檔出現的接口，那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現的接口。
瀏覽器可以做什么呢？比如跳轉到另一個頁面、前進、后退等等，程序還可能需要獲取屏幕的大小之類的參數。
所以 BOM 就是為了解決這些事情出現的接口。比如我們要讓瀏覽器跳轉到另一個頁面，只需要
location.href = "http://www.xxxx.com";這個 location 就是 BOM 里的一個對象。
由於BOM的window包含了document，因此可以直接使用window對象的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因為document對象又是DOM（Document Object Model）模型的根節點。
可以說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。
---------------------
作者：晨港飛燕
來源：CSDN
原文：https://blog.csdn.net/qq877507054/article/details/51395830
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！