JavaScript中DOM和BOM有什么用

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

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

文檔對象模型（DOM）

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

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

Document

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

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

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

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

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

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

如果沒有看懂模型，那就像跟一個盲人說，太陽是會發(fā)光發(fā)熱的，對于盲人來說，他是沒有這個概念的，因為他看不到太陽；

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

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

例如以下圖片：

JavaScript中DOM和BOM有什么用

具體代碼如下：

<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">

<title>Document</title>
</head>
<body>
<h2>Hello World!</h2>

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

<ul>

    <li>ECMAScript</li>

    <li>DOM</li>

    <li>BOM</li>

</ul>
</body>
</html>

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

JavaScript中DOM和BOM有什么用

從上面的圖，我們可以清晰的看到根元素是html，下面有兩個子元素，一個是head，另一個是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)，屬于初級試驗性質(zhì)的，主要用途翻轉(zhuǎn)圖片、驗證表單數(shù)據(jù)。
DOM1：1998年10月制定的標(biāo)準(zhǔn)，由兩大部分組成：DOM核心和DOM HTML。
DOM2：擴(kuò)展鼠標(biāo)和用戶界面事件、范圍、遍歷，增加了對 CSS支持。
DOM3：進(jìn)一步擴(kuò)展了DOM，新增了驗證文檔的方法，支持XML 1.0 規(guī)范。

Web 瀏覽器對 DOM 的支持

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

JavaScript中DOM和BOM有什么用

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

其實DOM 并不只是針對 JavaScript 的，很多別的語言也都實現(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)的，因此每個瀏覽器都有自己的實現(xiàn)。

但是又因為各大瀏覽器之間都有共同對象，于是這些對象就成了事實上的標(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è)資訊頻道！

名稱欄目：JavaScript中DOM和BOM有什么用
轉(zhuǎn)載來于：http://muchs.cn/article16/ijscdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站改版、虛擬主機(jī)、用戶體驗、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容