這篇文章主要講解了“JavaScript的BOM技術(shù)怎么用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript的BOM技術(shù)怎么用”吧！
創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(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ù):13518219792
BOM = Browser Object Model 瀏覽器對(duì)象模型
它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，其核心對(duì)象是 window
BOM 由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性
BOM 缺乏標(biāo)準(zhǔn)，JavaScript 語法的標(biāo)準(zhǔn)化組織是 ECMA, DOM 的標(biāo)準(zhǔn)化組織是 W3C, BOM最初是Netscape 瀏覽器標(biāo)準(zhǔn)的一部分
| DOM | BOM |
|---|---|
| 文檔對(duì)象模型 | 瀏覽器對(duì)象模型 |
| DOM 就是把文檔當(dāng)作一個(gè)對(duì)象來看待 | 把瀏覽器當(dāng)作一個(gè)對(duì)象來看待 |
| DOM 的頂級(jí)對(duì)象是document | BOM 的頂級(jí)對(duì)象是window |
| DOM 主要學(xué)習(xí)的是操作頁面元素 | BOM 學(xué)習(xí)的是瀏覽器窗口交互的一些對(duì)象 |
| DOM 是 W3C 標(biāo)準(zhǔn)規(guī)范 | BOM 是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差 |
BOM 比 DOM 更大。它包含 DOM。
window 對(duì)象是瀏覽器的頂級(jí)對(duì)象，它具有雙重角色
它是 JS 訪問瀏覽器窗口的一個(gè)接口
它是一個(gè)全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法
在調(diào)用的時(shí)候可以省略 window，前面學(xué)習(xí)的對(duì)話框都屬于 window 對(duì)象方法，如 alert()、prompt()等。
注意：window下的一個(gè)特殊屬性 window.name
重慶分公司
重慶分公司
// 定義在全局作用域中的變量會(huì)變成window對(duì)象的屬性
var num = 10;
console.log(window.num);
// 10
// 定義在全局作用域中的函數(shù)會(huì)變成window對(duì)象的方法
function fn() {
console.log(11);
}
console.fn();
// 11
var name = 10; //不要用這個(gè)name變量,window下有一個(gè)特殊屬性window.name
console.log(window.num);window.onload是窗口（頁面）加載事件，當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(fā)該事件（包括圖像，腳本文件，CSS文件等），就調(diào)用的處理函數(shù)。
window.onload = function(){
};// 或者window.addEventListener("load",function(){});注意：
有了window.onload就可以把JS代碼寫到頁面元素的上方
因?yàn)?code>onload是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)
window.onload 傳統(tǒng)注冊(cè)事件方式，只能寫一次
如果有多個(gè)，會(huì)以最后一個(gè)window.onload為準(zhǔn)
如果使用addEventListener 則沒有限制
document.addEventListener('DOMContentLoaded',function(){})接收兩個(gè)參數(shù)：
DOMCountentLoaded事件觸發(fā)時(shí)，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash等等
如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時(shí)間
交互效果就不能實(shí)現(xiàn)，必然影響用戶的體驗(yàn)，此時(shí)用 DOMContentLoaded事件比較合適。
load等頁面內(nèi)容全部加載完畢，包括頁面dom元素，圖片，flash，css等
DOMContentLoaded 是DOM加載完畢，不包含圖片 flash css 等就可以執(zhí)行，加載速度比load更快一些
window.onresize 是調(diào)整窗口大小加載事件，當(dāng)觸發(fā)時(shí)就調(diào)用的處理函數(shù)
window.onresize = function() {}// 或者window.addEventListener('resize',function(){});只要窗口大小發(fā)生像素變化，就會(huì)觸發(fā)這個(gè)事件
我們經(jīng)常利用這個(gè)事件完成響應(yīng)式布局。window.innerWidth 當(dāng)前屏幕的寬度
window 對(duì)象給我們提供了兩個(gè)定時(shí)器
setTimeout()
setInterval()
setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù)。
window.setTimeout(調(diào)用函數(shù),[延遲的毫秒數(shù)]);
注意：
window可以省略
這個(gè)調(diào)用函數(shù)
可以直接寫函數(shù)
或者寫函數(shù)名
或者采取字符串 ‘函數(shù)名()’（不推薦）
延遲的毫秒數(shù)省略默認(rèn)是0，如果寫，必須是毫秒
因?yàn)槎〞r(shí)器可能有很多，所以我們經(jīng)常給定時(shí)器賦值一個(gè)標(biāo)識(shí)符
setTimeout() 這個(gè)調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback
普通函數(shù)是按照代碼順序直接調(diào)用，而這個(gè)函數(shù)，需要等待事件，事件到了才會(huì)去調(diào)用這個(gè)函數(shù)，因此稱為回調(diào)函數(shù)。
clearTimeout()方法取消了先前通過調(diào)用 setTimeout()建立的定時(shí)器
window.clearTimeout(timeoutID)
注意：
window可以省略
里面的參數(shù)就是定時(shí)器的標(biāo)識(shí)符
setInterval()方法重復(fù)調(diào)用一個(gè)函數(shù)，每隔這個(gè)時(shí)間，就去調(diào)用一次回調(diào)函數(shù)
window.setInterval(回調(diào)函數(shù),[間隔的毫秒數(shù)]);
window可以省略
這個(gè)回調(diào)函數(shù):
可以直接寫函數(shù)
或者寫函數(shù)名
或者采取字符 ‘函數(shù)名()’
第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次
clearInterval ( ) 方法取消了先前通過調(diào)用 setInterval() 建立的定時(shí)器
注意：
window可以省略
里面的參數(shù)就是定時(shí)器的標(biāo)識(shí)符
