往期回顧
在上一期的《JavaScript的組成 | 核心-ECMAScript
》☜裏，我們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對象模型-DOM、瀏覽器對象模型-BOM
那麼本期就讓我們繼續往下說說DOM、BOM這兩大部分吧：
文檔對象模型（DOM）
面試官很喜歡問的：“你知道什麼是文檔對象模型嗎？”，那今天我們一個個來解釋一下吧：
DOM：Document Object Model（文檔對象模型）
Document
中文翻譯：文檔，這裏的文檔指的是XML和HTML的頁面，當你創建一個頁面並且加載到Web瀏覽器中，DOM就在幕後悄然而生，它會把你編寫的網頁文檔轉換成一個文檔對象。
Object
中文翻譯：對象，學習js的同學一定對“一切皆對象”這句話不會陌生；
在JavaScript語言的類型大致可以分爲以下三種：
-
用戶定義對象 自行創建的對象，例如： var obj = {}
-
內置對象 內置在JavaScript中的對象，無需我們創建，可以直接使用，例如：Array、Math和Data等
-
宿主對象 上期我們知道了什麼是宿主環境以後，應該對宿主對象是什麼有了一定的瞭解，在這裏我們指的是瀏覽器提供的對象，例如:window、document。
DOM中主要關注的就是document，document對象的主要功能就是處理網頁內容。
Model
中文翻譯：模型，如果你把這個詞從DOM中抽離出來，看下面的圖片~是不是就很好理解。
打個比方，如圖：是一套小區建築模型，基本上任何售樓處都會有它的身影，買房的人只需要根據這套模型就可以瞭解建設完成後的小區長什麼樣子，有哪些公共設施，植被面積又有多少………
而DOM也像一個這樣的模型，但它代表着加載到瀏覽器窗口的當前網頁，我們可以利用JavaScript對它進行讀取。
有了模型之後，我們同樣需要能看懂模型（可以理解爲我需要知道這個模型是幹什麼用的）；
如果沒有看懂模型，那就像跟一個盲人說，太陽是會發光發熱的，對於盲人來說，他是沒有這個概念的，因爲他看不到太陽；
所以，雖然我們可以通過JavaScript對DOM進行讀取，但是我們要必須先能看懂模型。
DOM把一份文檔表示爲一顆樹，有一個主幹支以及無數的分干支，其實我個人覺得，更像是族譜。因爲在描述標籤之間關係的時候，我們經常用“父級”、“子級”、“兄弟”這樣的詞來表明並列標籤和嵌套標籤。
例如以下圖片：
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<p>歡迎觀看本次文章，包含以下內容：</p>
<ul>
<li>ECMAScript</li>
<li>DOM</li>
<li>BOM</li>
</ul>
</body>
</html>
我們把上面的結構抽象成DOM樹：
從上面的圖，我們可以清晰的看到根元素是html，下面有兩個子元素，一個是head，另一個是body，而head和body之間是兄弟關係，以此類推，用這樣的方式我們可以把頁面中的所有元素都用模型抽象成一棵樹。
所以，DOM簡單來說就是：一套對文檔的內容進行抽象和概念化的方法，提供訪問和操作網頁內容的方法和接口。
DOM的級別
不要以爲只有ECMAScript有版本哦，DOM也是有不一樣級別的。
W3C官方網址：
https://www.w3.org/standards/techs/dom#w3c_all
DOM分爲以下：
-
DOM0：沒有納入標準，屬於初級試驗性質的，主要用途翻轉圖片、驗證表單數據。
-
DOM1：1998年10月制定的標準，由兩大部分組成：DOM核心和DOM HTML。
-
DOM2：擴展鼠標和用戶界面事件、範圍、遍歷，增加了對 CSS支持。
-
DOM3：進一步擴展了DOM，新增了驗證文檔的方法，支持XML 1.0 規範。
Web 瀏覽器對 DOM 的支持
既然有級別，那麼無可避免就要面對兼容問題，我們來看一下各個版本瀏覽器支持情況：
圖片來自《JavaScript高級程序設計》
其實DOM 並不只是針對 JavaScript 的，很多別的語言也都實現了 DOM哦
瀏覽器對象模型（BOM）
BOM：Browser Object Model （瀏覽器對象模型）
提供與瀏覽器交互的方法和接口。
理解了DOM以後再來看BOM，就不需要這麼細緻的講解啦。開發人員使用 BOM 可以控制瀏覽器顯示的頁面以外的部分，例如：獲取當前瀏覽器版本這樣的操作。
從根本上講，BOM 只處理瀏覽器窗口和框架；但人們習慣上也把所有針對瀏覽器的 JavaScript 擴展算作 BOM 的一部分。下面就是一些這樣的擴展：
-
彈出新瀏覽器窗口的功能
-
移動、縮放和關閉瀏覽器窗口的功能
-
提供瀏覽器詳細信息的 navigator 對象
-
提供瀏覽器所加載頁面的詳細信息的 location 對象
-
提供用戶顯示器分辨率詳細信息的 screen 對象
-
對 cookies 的支持
-
像 XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義對象
BOM是沒有標準的，因此每個瀏覽器都有自己的實現。
但是又因爲各大瀏覽器之間都有共同對象，於是這些對象就成了事實上的標準。
W3C把瀏覽器中 JavaScript 最基本的部分標準化，已經將 BOM 的主要方面納入了 HTML5 的規範中。
本期就到這裏爲止啦~大家先把概念瞭解清楚，學習起來會事半功倍哦~具體的DOM、BOM有哪些操作及方法，我們後面再說哦~
下一期預告：使用JavaScript
如果你也在看紅寶書，不妨在下方留言，一起交流討論下學習心得哦
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，爲您帶來優質前端技術乾貨；