什么是DOM和BOM？

DOM?(Document?)，簡(jiǎn)稱(chēng)文檔對(duì)象模型。通過(guò)創(chuàng)建樹(shù)來(lái)表示文檔，描述了處理網(wǎng)頁(yè)內(nèi)容的方法和接口。用DOM API可以輕松地刪除、添加和替換節(jié)點(diǎn)。

BOM (Browser object model)，簡(jiǎn)稱(chēng)瀏覽器對(duì)象模型。描述了與瀏覽器進(jìn)行交互的方法和接口

BOM的核心是window，而window對(duì)象又具有雙重角色，它既是通過(guò)js訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口，又是一個(gè)Global（全局）對(duì)象。這意味著在網(wǎng)頁(yè)中定義的任何對(duì)象，變量和函數(shù)，都作為全局對(duì)象的一個(gè)屬性和方法存在.

從window.document已然可以看出，DOM的最根本的對(duì)象是BOM的window對(duì)象的子對(duì)象document。推理如下：

js是通過(guò)訪(fǎng)問(wèn)BOM對(duì)象來(lái)訪(fǎng)問(wèn)、控制、修改客戶(hù)端(瀏覽器)。

由于BOM的window包含了document，window對(duì)象的屬性和方法是可以直接使用而且被感知的，因此可以直接使用window對(duì)象的document屬性，通過(guò)document屬性就可以訪(fǎng)問(wèn)、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。

因?yàn)閐ocument對(duì)象又是DOM模型的根節(jié)點(diǎn)，可以說(shuō)BOM包含了DOM(對(duì)象)。

瀏覽器提供出來(lái)給予訪(fǎng)問(wèn)的是BOM對(duì)象，從BOM對(duì)象再訪(fǎng)問(wèn)到DOM對(duì)象，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。

如何是實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

1.定時(shí)器Setlnterval+Cookie

2LocalStaorge

3.WebSocket通訊

4.SharedWorker

5.postMessage

對(duì)DOMContentLoaded,load,beforeunload,unload幾個(gè)頁(yè)面生命周期事件的理解?

HTML 頁(yè)面的生命周期包含三個(gè)重要事件：

• DOMContentLoaded —— 瀏覽器已完全加載 HTML，并構(gòu)建了 DOM 樹(shù)，但像 <img> 和樣式表之類(lèi)的外部資源可能尚未加載完成。
• load —— 瀏覽器不僅加載完成了 HTML，還加載完成了所有外部資源：圖片，樣式等。
• beforeunload / unload —— 當(dāng)用戶(hù)正在離開(kāi)頁(yè)面時(shí)。

每個(gè)事件都是有用的：

• DOMContentLoaded 事件 —— DOM 已經(jīng)就緒，因此處理程序可以查找 DOM 節(jié)點(diǎn)，并初始化接口。
• load 事件 —— 外部資源已加載完成，樣式已被應(yīng)用，圖片大小也已知了。
• beforeunload 事件 —— 用戶(hù)正在離開(kāi)：我們可以檢查用戶(hù)是否保存了更改，并詢(xún)問(wèn)他是否真的要離開(kāi)。
• unload 事件 —— 用戶(hù)幾乎已經(jīng)離開(kāi)了，但是我們?nèi)匀豢梢詥?dòng)一些操作，例如發(fā)送統(tǒng)計(jì)數(shù)據(jù)。

總結(jié)
頁(yè)面生命周期事件：

• 當(dāng) DOM 準(zhǔn)備就緒時(shí)，document 上的 DOMContentLoaded 事件就會(huì)被觸發(fā)。在這個(gè)階段，我們可以將 JavaScript 應(yīng)用于元素。

??????諸如 <script>...</script> 或 <script src="..."></script> 之類(lèi)的腳本會(huì)阻塞 ?DOMContentLoaded，瀏覽器將等待它們執(zhí)行結(jié)束。

????????圖片和其他資源仍然可以繼續(xù)被加載。

• 當(dāng)頁(yè)面和所有資源都加載完成時(shí)，window 上的 load 事件就會(huì)被觸發(fā)。我們很少使用它，因?yàn)橥ǔo(wú)需等待那么長(zhǎng)時(shí)間。
• 當(dāng)用戶(hù)想要離開(kāi)頁(yè)面時(shí)，window 上的 beforeunload 事件就會(huì)被觸發(fā)。如果我們?nèi)∠@個(gè)事件，瀏覽器就會(huì)詢(xún)問(wèn)我們是否真的要離開(kāi)（例如，我們有未保存的更改）。
• 當(dāng)用戶(hù)最終離開(kāi)時(shí)，window 上的 unload 事件就會(huì)被觸發(fā)。在處理程序中，我們只能執(zhí)行不涉及延遲或詢(xún)問(wèn)用戶(hù)的簡(jiǎn)單操作。正是由于這個(gè)限制，它很少被使用。我們可以使用 navigator.sendBeacon 來(lái)發(fā)送網(wǎng)絡(luò)請(qǐng)求。

使用input標(biāo)簽上傳圖片時(shí)，怎樣觸發(fā)默認(rèn)拍照功能？

使用 capture 屬性（用于指定文件上傳控件中媒體拍攝的方式）

可選值：

• camera 打開(kāi)攝像頭
• user 前置攝像頭
• environment 后置攝像頭?
• camcorder 錄像
• microphone 錄音

iinput上傳文件設(shè)置同時(shí)選擇多張？

通過(guò)input標(biāo)簽設(shè)置multiple屬性

<input type = "file" name="files" multiple/>

如何禁止input展示輸入的歷史記錄？

在input中加入autocomplete=”off“

（autocomplete屬性是用來(lái)規(guī)定輸入字段是否自動(dòng)完成的功能）

能否使用自閉合script標(biāo)簽引入腳本文件？

不能。自閉合標(biāo)簽來(lái)自于XML語(yǔ)法，而不是HTML語(yǔ)法。

頁(yè)面統(tǒng)計(jì)數(shù)據(jù)中。常用的PV、UV指標(biāo)分別是什么？

PV（頁(yè)面訪(fǎng)問(wèn)量）：用戶(hù)每一次對(duì)網(wǎng)站中的每個(gè)網(wǎng)頁(yè)訪(fǎng)問(wèn)均被記錄一個(gè)PV

UV（獨(dú)立訪(fǎng)客）：是一個(gè)反映實(shí)際使用者的概念，每個(gè)UV相對(duì)于每個(gè)IP，更加準(zhǔn)確地對(duì)應(yīng)一個(gè)實(shí)際的瀏覽者是一個(gè)反映實(shí)際使用者的概念，每個(gè)UV相對(duì)于每個(gè)IP，更加準(zhǔn)確地對(duì)應(yīng)一個(gè)實(shí)際的瀏覽者。

簡(jiǎn)單描述從輸入網(wǎng)址url到頁(yè)面顯示的過(guò)程？

大概過(guò)程如下：

輸入網(wǎng)址

DNS解析

發(fā)起TCP連接

客戶(hù)端發(fā)送HTTP請(qǐng)求

服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文

瀏覽器解析渲染頁(yè)面

連接結(jié)束

HTTP1.0和HTTP2.0的區(qū)別

總的區(qū)別就是：

HTTP/2采用二進(jìn)制格式而非文本格式

HTTP/2是完全多路復(fù)用的，而非有序并阻塞的——只需一個(gè)連接即可實(shí)現(xiàn)并行

使用報(bào)頭壓縮，HTTP/2降低了開(kāi)銷(xiāo)

HTTP/2讓服務(wù)器可以將響應(yīng)主動(dòng)“推送”到客戶(hù)端緩存中

總結(jié)

以上是生活随笔為你收集整理的【什么是DOM和BOM】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。