這篇文章主要介紹了javascript BOM瀏覽器對(duì)象模型應(yīng)用實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇javascript BOM瀏覽器對(duì)象模型應(yīng)用實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、姑蘇網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、BOM 概述

1.1 什么是 BOM

BOM（Browser Object Model）即瀏覽器對(duì)象模型，它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，其核心 對(duì)象是 window。

BOM 由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性。

DOM：

1.文檔對(duì)象模型   

2.DOM 就是把「文檔」當(dāng)做一個(gè)「對(duì)象」來(lái)看待

3.DOM 的頂級(jí)對(duì)象是 document

4.5.DOM 主要學(xué)習(xí)的是操作頁(yè)面元素

DOM 是 W3C 標(biāo)準(zhǔn)規(guī)范

BOM： 

1.瀏覽器對(duì)象模型

2.把「瀏覽器」當(dāng)做一個(gè)「對(duì)象」來(lái)看待

3.BOM 的頂級(jí)對(duì)象是 window

4.BOM 學(xué)習(xí)的是瀏覽器窗口交互的一些對(duì)象

5.BOM 是瀏覽器廠商在各自瀏覽器上定義的     ，兼容性較差    

1.2 BOM 的構(gòu)成

BOM 比 DOM 更大，它包含 DOM

1. 它是 JS 訪問(wèn)瀏覽器窗口的一個(gè)接口。     

2. 它是一個(gè)全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。     

在調(diào)用的時(shí)候可以省略 window，前面學(xué)習(xí)對(duì)話(huà)框都屬于 window 對(duì)象方法，如 alert()prompt()等。     

3.注意：window下的一個(gè)特殊屬性 window.name

2. window 對(duì)象的常見(jiàn)事件

2.1 窗口加載事件

（1）window.onload 是窗口 (頁(yè)面）加載事件,當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(fā)該事件(包括圖像、腳本文件、CSS 文件等), 就調(diào)用的處理函數(shù)。     

代碼演示：    

注意：   

1. 有了 window.onload 就可以把 JS 代碼寫(xiě)到頁(yè)面元素的上方，因?yàn)?onload 是等頁(yè)面內(nèi)容全部加載完畢， 再去執(zhí)行處理函數(shù)。       

2. window.onload 傳統(tǒng)注冊(cè)事件方式 只能寫(xiě)一次，如果有多個(gè)，會(huì)以最后一個(gè) window.onload 為準(zhǔn)。       

3. 如果使用addEventListener則沒(méi)有限制      

（2）DOMContentLoaded       

事件觸發(fā)時(shí)，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash等等。      

document.addEventListener('DOMContentLoaded',function(){})；

代碼演示:

注意：     

1. Ie9以上才支持       

2.如果頁(yè)面的圖片很多的話(huà), 從用戶(hù)訪問(wèn)到onload觸發(fā)可能需要較長(zhǎng)的時(shí)間, 交互效果就不能實(shí)現(xiàn)，      

必然影響用 戶(hù)的體驗(yàn)，此時(shí)用 DOMContentLoaded 事件比較合適。      

2.2 調(diào)整窗口大小事件

1.window.onresize = function(){}     

2.window.addEventListener("resize",function(){});    

window.onresize    是調(diào)整窗口大小加載事件, 當(dāng)觸發(fā)時(shí)就調(diào)用的處理函數(shù)。       

注意：     

1. 只要窗口大小發(fā)生像素變化，就會(huì)觸發(fā)這個(gè)事件。       

2. 我們經(jīng)常利用這個(gè)事件完成響應(yīng)式布局。 window.innerWidth 當(dāng)前屏幕的寬度      

代碼演示：      

3. 定時(shí)器

3.1 兩種定時(shí)器

window 對(duì)象給我們提供了 2 個(gè)非常好用的方法-定時(shí)器。

1.setTimeout()         

2.setInterval()         

3.2 setTimeout() 定時(shí)器

window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);

該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù)。          

代碼演示：

注意：         

1. window 可以省略。

2. 這個(gè)調(diào)用函數(shù)可以直接寫(xiě)函數(shù)，或者寫(xiě)函數(shù)名或者采取字符串‘函數(shù)名()'三種形式。第三種不推薦。

3. 延遲的毫秒數(shù)省略默認(rèn)是 0，如果寫(xiě)，必須是毫秒。

4. 因?yàn)槎〞r(shí)器可能有很多，所以我們經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符。

5.setTimeout() 這個(gè)調(diào)用函數(shù)我們也稱(chēng)為回調(diào)函數(shù) callback

6.以前我們講的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的

函數(shù)也是回調(diào) 函數(shù)。

3.3 停止 setTimeout() 定時(shí)器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過(guò)調(diào)用setTimeout()建立的定時(shí)器。             

代碼演示：

3.4 setInterval() 定時(shí)器

window.setInterval(
回調(diào)函數(shù)
, [
間隔的毫秒數(shù)
]);

setInterval() 方法重復(fù)調(diào)用一個(gè)函數(shù)，每隔這個(gè)時(shí)間，就去調(diào)用一次回調(diào)函數(shù)。               

代碼演示:

案例： 倒計(jì)時(shí)             

代碼演示：

    
        
歐冠決賽
        
UEFA Champions Final
        
倒計(jì)時(shí)
        
            

            

            

        

    


    

演示結(jié)果：

3.5 停止 setInterval() 定時(shí)器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過(guò)調(diào)用setInterval()建立的定時(shí)器。                

代碼演示：

案例： 發(fā)送短信               

點(diǎn)擊按鈕后，該按鈕60秒之內(nèi)不能再次點(diǎn)擊，防止重復(fù)發(fā)送短信                

代碼演示：

    
        
        發(fā)送
    

    

演示結(jié)果：

3.6 this指向問(wèn)題

this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)，一般情況下this 的最終指向的是那個(gè)調(diào)用它的對(duì)象現(xiàn)階段，我們先了解一下幾個(gè)this指向             

1. 全局作用域或者普通函數(shù)中this指向全局對(duì)象window（注意定時(shí)器里面的this指向window）             

2. 方法調(diào)用中誰(shuí)調(diào)用this指向誰(shuí)             

3.構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實(shí)例            

4. JS 執(zhí)行機(jī)制

4.1 JS 是單線程

JavaScript 語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。

4.2同步和異步

為了解決這個(gè)問(wèn)題，利用多核 CPU 的計(jì)算能力，HTML5 提出 Web Worker 標(biāo)準(zhǔn)，允許             

JavaScript 腳本創(chuàng)建多個(gè)線程。于是，JS 中出現(xiàn)了同步和異步

1.同步

前一個(gè)任務(wù)結(jié)束后再執(zhí)行后一個(gè)任務(wù)，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的。              

2.異步              

你在做一件事情時(shí)，因?yàn)檫@件事情會(huì)花費(fèi)很長(zhǎng)時(shí)間，在做這件事的同時(shí)，你還可以去處理其他事情。比如做 飯的異步做法，我們?cè)跓耐瑫r(shí)，利用這10分鐘，去切菜，炒菜。               

3.同步任務(wù)

同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。

4.異步任務(wù)

JS 的異步是通過(guò)回調(diào)函數(shù)實(shí)現(xiàn)的。

一般而言，異步任務(wù)有以下三種類(lèi)型:                   

（1）普通事件，如 click、resize 等                   

（2）資源加載，如 load、error 等                   

（3）定時(shí)器，包括 setInterval、setTimeout 等                   

異步任務(wù)相關(guān)回調(diào)函數(shù)添加到任務(wù)隊(duì)列中（任務(wù)隊(duì)列也稱(chēng)為消息隊(duì)列）。

4.3 JS 執(zhí)行機(jī)制

1. 先執(zhí)行執(zhí)行棧中的同步任務(wù)。

2. 異步任務(wù)（回調(diào)函數(shù)）放入任務(wù)隊(duì)列中。

3. 一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)按次序讀取任務(wù)隊(duì)列中的異步任務(wù)，于是被讀取的異步任 務(wù)結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開(kāi)始執(zhí)行。

5. location 對(duì)象

5.1 什么是 location 對(duì)象

window 對(duì)象給我們提供了一個(gè) location 屬性用于獲取或設(shè)置窗體的 URL，并且可以用于解析URL 。 因?yàn)?這個(gè)屬性返回的是一個(gè)對(duì)象，所以我們將這個(gè)屬性也稱(chēng)為 location 對(duì)象。

5.2 URL

統(tǒng)一資源定位符 (Uniform Resource Locator, URL) 是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個(gè)文件都有 一個(gè)唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。           

URL 的一般語(yǔ)法格式為：    

protocol://host[:port]/path/[?query]#fragment           

http://www.itcast.cn/index.html?name=andy&age=18#link          

案例： 5秒鐘之后自動(dòng)跳轉(zhuǎn)頁(yè)面         

代碼演示：

    點(diǎn)我跳轉(zhuǎn)頁(yè)面
    

案例： 獲取 URL 參數(shù)數(shù)據(jù)           

代碼演示：

    
        用戶(hù)名:
        
    

5.4 location 對(duì)象的方法

6. navigator 對(duì)象

navigator 對(duì)象包含有關(guān)瀏覽器的信息，它有很多屬性，我們最常用的是 userAgent，該屬性可以            

返回由客 戶(hù)機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。             

下面前端代碼可以判斷用戶(hù)那個(gè)終端打開(kāi)頁(yè)面，實(shí)現(xiàn)跳轉(zhuǎn)            

代碼演示：

7. history 對(duì)象

window 對(duì)象給我們提供了一個(gè) history 對(duì)象，與瀏覽器歷史記錄進(jìn)行交互。該對(duì)象包含用戶(hù)（在瀏覽器窗口中） 訪問(wèn)過(guò)的 URL。  

history 對(duì)象一般在實(shí)際開(kāi)發(fā)中比較少用，但是會(huì)在一些 OA 辦公系統(tǒng)中見(jiàn)到。

關(guān)于“javascript BOM瀏覽器對(duì)象模型應(yīng)用實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“javascript BOM瀏覽器對(duì)象模型應(yīng)用實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。