這篇文章主要介紹JavaScript中DOM和BOM有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)沈陽,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

文檔對象模型（DOM）

面試官很喜歡問的：“你知道什么是文檔對象模型嗎？”，那今天我們一個(gè)個(gè)來解釋一下吧：

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

Document

中文翻譯：文檔，這里的文檔指的是XML和HTML的頁面，當(dāng)你創(chuàng)建一個(gè)頁面并且加載到Web瀏覽器中，DOM就在幕后悄然而生，它會把你編寫的網(wǎng)頁文檔轉(zhuǎn)換成一個(gè)文檔對象。

Object

中文翻譯：對象，學(xué)習(xí)js的同學(xué)一定對“一切皆對象”這句話不會陌生；

在JavaScript語言的類型大致可以分為以下三種：

• 用戶定義對象
  自行創(chuàng)建的對象，例如：

  var obj = {}

• 內(nèi)置對象
    內(nèi)置在JavaScript中的對象，無需我們創(chuàng)建，可以直接使用，例如：Array、Math和Data等

• 宿主對象
    上期我們知道了什么是宿主環(huán)境以后，應(yīng)該對宿主對象是什么有了一定的了解，在這里我們指的是瀏覽器提供的對象，例如:window、document。

DOM中主要關(guān)注的就是document，document對象的主要功能就是處理網(wǎng)頁內(nèi)容。

Model

中文翻譯：模型，如果你把這個(gè)詞從DOM中抽離出來，看下面的圖片~是不是就很好理解。

打個(gè)比方，如圖：是一套小區(qū)建筑模型，基本上任何售樓處都會有它的身影，買房的人只需要根據(jù)這套模型就可以了解建設(shè)完成后的小區(qū)長什么樣子，有哪些公共設(shè)施，植被面積又有多少………

而DOM也像一個(gè)這樣的模型，但它代表著加載到瀏覽器窗口的當(dāng)前網(wǎng)頁，我們可以利用JavaScript對它進(jìn)行讀取。

有了模型之后，我們同樣需要能看懂模型（可以理解為我需要知道這個(gè)模型是干什么用的）；

如果沒有看懂模型，那就像跟一個(gè)盲人說，太陽是會發(fā)光發(fā)熱的，對于盲人來說，他是沒有這個(gè)概念的，因?yàn)樗床坏教枺?/p>

所以，雖然我們可以通過JavaScript對DOM進(jìn)行讀取，但是我們要必須先能看懂模型。

DOM把一份文檔表示為一顆樹，有一個(gè)主干支以及無數(shù)的分干支，其實(shí)我個(gè)人覺得，更像是族譜。因?yàn)樵诿枋鰳?biāo)簽之間關(guān)系的時(shí)候，我們經(jīng)常用“父級”、“子級”、“兄弟”這樣的詞來表明并列標(biāo)簽和嵌套標(biāo)簽。

例如以下圖片：

具體代碼如下：

 






Hello World!

歡迎觀看本次文章，包含以下內(nèi)容：



    
ECMAScript

    
DOM

    
BOM

我們把上面的結(jié)構(gòu)抽象成DOM樹：

從上面的圖，我們可以清晰的看到根元素是html，下面有兩個(gè)子元素，一個(gè)是head，另一個(gè)是body，而head和body之間是兄弟關(guān)系，以此類推，用這樣的方式我們可以把頁面中的所有元素都用模型抽象成一棵樹。

所以，DOM簡單來說就是：一套對文檔的內(nèi)容進(jìn)行抽象和概念化的方法，提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口。

DOM的級別

不要以為只有ECMAScript有版本哦，DOM也是有不一樣級別的。

W3C官方網(wǎng)址：

https://www.w3.org/standards/...

DOM分為以下：

• DOM0：沒有納入標(biāo)準(zhǔn)，屬于初級試驗(yàn)性質(zhì)的，主要用途翻轉(zhuǎn)圖片、驗(yàn)證表單數(shù)據(jù)。

• DOM1：1998年10月制定的標(biāo)準(zhǔn)，由兩大部分組成：DOM核心和DOM HTML。

• DOM2：擴(kuò)展鼠標(biāo)和用戶界面事件、范圍、遍歷，增加了對 CSS支持。

• DOM3：進(jìn)一步擴(kuò)展了DOM，新增了驗(yàn)證文檔的方法，支持XML 1.0 規(guī)范。

Web 瀏覽器對 DOM 的支持

既然有級別，那么無可避免就要面對兼容問題，我們來看一下各個(gè)版本瀏覽器支持情況：

圖片來自《JavaScript高級程序設(shè)計(jì)》

其實(shí)DOM 并不只是針對 JavaScript 的，很多別的語言也都實(shí)現(xiàn)了 DOM哦

瀏覽器對象模型（BOM）

BOM：Browser Object Model （瀏覽器對象模型）

提供與瀏覽器交互的方法和接口。

理解了DOM以后再來看BOM，就不需要這么細(xì)致的講解啦。開發(fā)人員使用 BOM 可以控制瀏覽器顯示的頁面以外的部分，例如：獲取當(dāng)前瀏覽器版本這樣的操作。

從根本上講，BOM 只處理瀏覽器窗口和框架；但人們習(xí)慣上也把所有針對瀏覽器的 JavaScript 擴(kuò)展算作 BOM 的一部分。下面就是一些這樣的擴(kuò)展：

• 彈出新瀏覽器窗口的功能

• 移動、縮放和關(guān)閉瀏覽器窗口的功能

• 提供瀏覽器詳細(xì)信息的 navigator 對象

• 提供瀏覽器所加載頁面的詳細(xì)信息的 location 對象

• 提供用戶顯示器分辨率詳細(xì)信息的 screen 對象

• 對 cookies 的支持

• 像 XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義對象

BOM是沒有標(biāo)準(zhǔn)的，因此每個(gè)瀏覽器都有自己的實(shí)現(xiàn)。

但是又因?yàn)楦鞔鬄g覽器之間都有共同對象，于是這些對象就成了事實(shí)上的標(biāo)準(zhǔn)。

W3C把瀏覽器中 JavaScript 最基本的部分標(biāo)準(zhǔn)化，已經(jīng)將 BOM 的主要方面納入了 HTML5 的規(guī)范中。

以上是“JavaScript中DOM和BOM有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！