JavaScript的組成 | DOM/BOM

時間 2019-11-06

標籤 javascript 組成 dom bom 欄目 JavaScript 简体版

原文原文鏈接

往期回顧html

在上一期的《JavaScript的組成 | 核心-ECMAScript前端

》☜裏，咱們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對象模型-DOM、瀏覽器對象模型-BOM面試

那麼本期就讓咱們繼續往下說說DOM、BOM這兩大部分吧：瀏覽器

文檔對象模型（DOM）cookie

面試官很喜歡問的：「你知道什麼是文檔對象模型嗎？」，那今天咱們一個個來解釋一下吧：框架

DOM：Document Object Model（文檔對象模型）dom

Document學習

中文翻譯：文檔，這裏的文檔指的是XML和HTML的頁面，當你建立一個頁面而且加載到Web瀏覽器中，DOM就在幕後悄然而生，它會把你編寫的網頁文檔轉換成一個文檔對象。spa

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/...

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

關注妙味訂閱號：「妙味前端」，爲您帶來優質前端技術乾貨；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。