DOM, DOCUMENT, BOM, WINDOW 有什麼區別?

01-09

本人是剛剛接觸js的學習的小白，一直弄不懂DOM,BOM,DOCUMENT,WINDOW這幾個到底有什麼區別，希望大神不吝賜教

我試著用通俗的語言解釋一下。

這幾個都是 JS 裡面的概念。

先說 DOM：

DOM 全稱是 Document Object Model，也就是文檔對象模型。

DOM 就是針對 HTML 和 XML 提供的一個API。什麼意思？就是說為了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和裡面的所有東西比如 && 這些標籤都看做一個對象，每個對象都叫做一個節點（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管的：

E區（就是你說的document啦。由web開發人員嘔心瀝血寫出來的一個文件夾，裡面有index.html，CSS和JS什麼鬼的，部署在伺服器上，我們可以通過瀏覽器的地址欄輸入URL然後回車將這個document載入到本地，瀏覽，右鍵查看源代碼等。//傳送門：啪啦能量！計算機網路掃盲！//吾等愚民為了給讀高中的二貨妹妹科普伺服器，寫過這篇二貨博客哇哈哈）

歸BOM管的：

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

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

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

D區（不知道咋形容=。=哦對，滾動條scroll bar）

……

--------------------------------------關於DOM---------------------------------------------------

暫時把DOM粗濫地理解成一套規則（其實就是一個介面，更通俗的說，一張類似莫爾斯電報碼的映射表，上面記錄著HTML文檔每個節點對應的名字，以及用JavaScript操控這些節點時一些抽象概念對應的具體定義）

下面要開始講DOM的歷史了，裝逼模式fly，Bi，裝逼被雷劈

時間倒流到上世紀90年代，瀏覽器大戰ing，一個程序員正在寫代碼。

代碼完成了，它不費吹灰之力寫好了一個document，如下圖左所示。【先把這糙貨當做之前說過的E區顯示出來的document吧，不過說來也是，HTML文檔不就有&和&嘛，捂臉。。。

but，有一天程序員接到了一個新需求，如下圖右所示

客戶想讓document紅色圓點所在部位往箭頭所示方向移動（就是相當於現在做一個網頁中圖片飛來飛去，下拉菜單彈來彈去的交互動效）

此時，W3C，這個拯救web世界和平的組織尚未構思關於DOM任何事情，但是第0級DOM早就粗來了，Netscape和微軟都有。但蛋疼的是！！微軟 IE 的 DOM 和 Netscape 的 DOM 是！不！一！樣！的！！

於是這個90年代的苦逼程序員為了實現剛才所說的動效，要寫兩套劇本！！（兩套JS腳本代碼）如下圖

由圖可見，

IE規定將document中紅色圓點的部位叫做」肚子」，Netscape則喜歡叫」腹部「。

紅色箭頭的方向IE規定叫「往右移「，Netscape則規定叫」往左移「。

作為一個21世紀的圍觀者，再這樣下去，我都懷疑會出現第一次世（wang）界（luo）大戰了。。。於是不久後W3C組織就站出來了，為了拯救世界。。制定了大一統的第一級DOM，程序員不用那麼蛋疼了，只用寫一套代碼（如下圖），因為微軟和Netscape兩家都開始一起遵守W3C的標準去改造自己的瀏覽器了。。

所以，最後的結論是，DOM就是一張映射表啦，記錄著一堆用代碼操控document時的規章制度~

摘自《JavaScript DOM編程藝術》
1.
W3C對DOM的定義是：「一個與系統平台和變成語言無關的介面，程序和腳本可以通過這個介面動態地訪問和修改文檔的內容，結構，樣式」

2.
有了它，可以讓任何一種程序設計語言，對任何一種標記語言編寫出來的任何一份文檔進行操控。
3.
DHTML是描述利用HTML，CSS，JavaScript相結合而創建動態HTML的術語（利用HTML將網頁標記為各種元素，利用CSS設置元素樣式和他們的顯示位置，利用JavaScript事實操控頁面的內容和樣式）
4.
DHTML曾被認為是HTML/XHTML，CSS，JavaScript相結合的產物，但真正把這些東西凝聚在一起的是DOM
5.
DHTML（更準確地說是「JavaScript DOM編程」）只適用於web領域的HTML文檔
6.
「DOM腳本程序設計」則涵蓋了使用任何一種支持DOM API的程序設計語言去處理任何一種標記文檔的情況

P.S.
HTML（超文本標記語言）只是標準標記語言wikipedia.org的一個具體應用，也就是說是個子集哦

前端開發中或多或少都要對DOM進行一些操作，比如我們常用的一些方法：document.getElementById("");document.querySelectorAll("");document.getElementsByClassName();document.createElement()...... 等等一系列的方法,這些方式是從哪裡來的呢？在哪裡定義的呢？我們就一起來測試一下。

```javascript

此處省略10000字，具體請點擊下面的鏈接吧。。。哈哈哈

```

作者：yuyuyu

鏈接：https://zhuanlan.zhihu.com/p/24604094

推薦一本shelly power的javascript學習指南。書寫的比較通俗易懂

JavaScript =EcmaScript+Dom+Bom。

從後往前回答，Bom，瀏覽器對象模型。雖然簡單的三個字母，但兼容性問題都是都是在這裡出的。Bom的核心對象就是Window,表示瀏覽器的實例，也就是你打開網頁的窗口和頁面的可見位置。也是Js中的全局變數。是訪問瀏覽器的一個介面。

var color= "blue":

alert(window.color):

可以看到在全局作用域中的變數或者函數都會變成widow 的屬性和方法(但定義在window 上的對象和全局變數還是有一點點區別的)。

JavaScript 中的很多全局方法都是widow的屬性。

Dom是網頁文件形象化的看成一個節點樹，可以用js來操作這棵樹。你看的輪播和酷炫效果都是操作它來實現的。

Document就是表示整個HTML頁面，而且Document也是widow對象的一個屬性，可以作為全局變數來訪問。

推薦你本書《JavaScript Dom 編程藝術》

Dom樹樓上畫的很好。

我也是小白，在自學。