這篇文章主要介紹了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)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。

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 是瀏覽器廠商在各自瀏覽器上定義的 ,兼容性較差
BOM 比 DOM 更大,它包含 DOM

1. 它是 JS 訪問(wèn)瀏覽器窗口的一個(gè)接口。
2. 它是一個(gè)全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成 window 對(duì)象的屬性和方法。
在調(diào)用的時(shí)候可以省略 window,前面學(xué)習(xí)對(duì)話框都屬于 window 對(duì)象方法,如 alert()prompt()等。
3.注意:window下的一個(gè)特殊屬性 window.name
(1)window.onload 是窗口 (頁(yè)面)加載事件,當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(fā)該事件(包括圖像、腳本文件、CSS 文件等), 就調(diào)用的處理函數(shù)。
代碼演示:
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// window.onload = function () {};
// 在頁(yè)面元素全部加載完畢后
window.addEventListener("load", function () {
var box = document.querySelector('.box');
box.onclick = function () {
box.style.backgroundColor = 'red';
};
});
</script>
<p class="box"></p>
</body>注意:
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(){});代碼演示:
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
//DOMContentLoaded 事件觸發(fā)時(shí),僅當(dāng)DOM加載完成,不包括樣式表,圖片,flash等等。
window.document.addEventListener('DOMContentLoaded', function () {
var box = document.querySelector('.box');
box.onclick = function () {
box.style.backgroundColor = 'red';
};
})
</script>
<p class="box"></p>
</body>注意:
1. Ie9以上才支持
2.如果頁(yè)面的圖片很多的話, 從用戶訪問(wèn)到onload觸發(fā)可能需要較長(zhǎng)的時(shí)間, 交互效果就不能實(shí)現(xiàn),
必然影響用 戶的體驗(yàn),此時(shí)用 DOMContentLoaded 事件比較合適。
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)前屏幕的寬度
代碼演示:
<body>
<script>
// window.onresize = function () { }
window.addEventListener("resize", function () {
// window.innerWidth當(dāng)前窗口的寬度;window.innerHeight當(dāng)前窗口的高度。
console.log(window.innerWidth, window.innerHeight);
});
</script>
</body>window 對(duì)象給我們提供了 2 個(gè)非常好用的方法-定時(shí)器。
1.setTimeout()
2.setInterval()
window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);
該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù)。
代碼演示:
<body>
<script>
// window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);
window.setTimeout(function () {
alert('你好');
},1000);
</script>
</body>注意:
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ù)我們也稱為回調(diào)函數(shù) callback
6.以前我們講的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的
函數(shù)也是回調(diào) 函數(shù)。
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通過(guò)調(diào)用setTimeout()建立的定時(shí)器。
代碼演示:
<body>
<script>
// window.setTimeout(調(diào)用函數(shù), [延遲的毫秒數(shù)]);
function fn() {
alert('你好');
};
var timer = setTimeout(fn, 1000);
//clearTimeout()方法取消了先前通過(guò)調(diào)用 setTimeout() 建立的定時(shí)器。
clearTimeout(timer);
</script>
</body>window.setInterval( 回調(diào)函數(shù) , [ 間隔的毫秒數(shù) ]);
setInterval() 方法重復(fù)調(diào)用一個(gè)函數(shù),每隔這個(gè)時(shí)間,就去調(diào)用一次回調(diào)函數(shù)。
代碼演示:
<body>
<script>
// setInterval() 定時(shí)器
function fn() {
for(var i = 1; i <= 5; i++) {
console.log(i);
}
}
var timer = setInterval(fn,1000);
</script>
</body>案例: 倒計(jì)時(shí)
代碼演示:
<style>
* {
margin: 0;
padding: 0;
}
.bigbox {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 250px;
transform: translate(-50%, -50%);
background-color: red;
box-shadow: 0 5px 5px rgba(300, 50, 50, .5);
}
h4 {
padding-top: 15px;
color: #fff;
text-align: center;
font-size: 40px;
}
p {
margin-top: 5px;
text-align: center;
color: #fff;
opacity: .7;
}
h5 {
margin-top: 20px;
text-align: center;
color: #fff;
font-size: 30px;
opacity: .9;
}
.box {
margin: 0 auto;
margin-top: 32px;
width: 160px;
display: flex;
justify-content: space-between;
}
.box p {
width: 50px;
height: 50px;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 50px;
font-size: 16px;
background-color: black;
}
</style>
</head>
<body>
<p class="bigbox">
<h4>歐冠決賽</h4>
<p>UEFA Champions Final</p>
<h5>倒計(jì)時(shí)</h5>
<p class="box">
<p></p>
<p></p>
<p></p>
</p>
</p>
<script>
// ① 這個(gè)倒計(jì)時(shí)是不斷變化的,因此需要定時(shí)器來(lái)自動(dòng)變化(setInterval)
// ② 三個(gè)黑色盒子里面分別存放時(shí)分秒
// ③ 三個(gè)黑色盒子利用innerHTML 放入計(jì)算的小時(shí)分鐘秒數(shù)
// ④ 第一次執(zhí)行也是間隔毫秒數(shù),因此剛刷新頁(yè)面會(huì)有空白
// ⑤ 最好采取封裝函數(shù)的方式, 這樣可以先調(diào)用一次這個(gè)函數(shù),防止剛開(kāi)始刷新頁(yè)面有空白問(wèn)題
//封裝一個(gè)函數(shù),傳入實(shí)參(時(shí)間),就會(huì)產(chǎn)生倒計(jì)時(shí)。
function fn(imputTime1) {
//獲取元素
var box = document.querySelector('.box');
var imputTime = new Date(imputTime1);
//先調(diào)用一下函數(shù),解決刷新頁(yè)面后數(shù)字空白現(xiàn)象
fn();
//設(shè)定一個(gè)倒計(jì)時(shí),每隔一秒就執(zhí)行一次。
var timer = setInterval(fn, 1000);
function fn() {
var nowTime = new Date();
var value = (imputTime.valueOf() - nowTime.valueOf()) / 1000;
var h = parseInt(value / 60 / 60 % 24)
h = h < 10 ? '0' + h : h;
box.children[0].innerHTML = h;
var m = parseInt(value / 60 % 60);
m = m < 10 ? '0' + m : m;
box.children[1].innerHTML = m;
var s = parseInt(value % 60);
s = s < 10 ? '0' + s : s;
box.children[2].innerHTML = s;
}
}
//輸入結(jié)束的時(shí)間
fn('2022-5-29 03:00:00');
</script>
</body>演示結(jié)果:

window.clearInterval(intervalID);
clearInterval()方法取消了先前通過(guò)調(diào)用setInterval()建立的定時(shí)器。
代碼演示:
<body>
<script>
// setInterval() 定時(shí)器
function fn() {
for (var i = 1; i <= 5; i++) {
console.log(i);
}
}
var timer = setInterval(fn, 1000);
// 停止 setInterval() 定時(shí)器window.clearInterval(intervalID);
clearInterval(timer);
</script>
</body>案例: 發(fā)送短信
點(diǎn)擊按鈕后,該按鈕60秒之內(nèi)不能再次點(diǎn)擊,防止重復(fù)發(fā)送短信
代碼演示:
<body>
<form action="" id="">
<input type="text">
<button>發(fā)送</button>
</form>
<script>
// 按鈕點(diǎn)擊之后,會(huì)禁用 disabled 為true
// 同時(shí)按鈕里面的內(nèi)容會(huì)變化, 注意 button 里面的內(nèi)容通過(guò) innerHTML修改
// 里面秒數(shù)是有變化的,因此需要用到定時(shí)器
// 定義一個(gè)變量,在定時(shí)器里面,不斷遞減
// 如果變量為0 說(shuō)明到了時(shí)間,我們需要停止定時(shí)器,并且復(fù)原按鈕初始狀態(tài)。
//點(diǎn)擊按鈕后,該按鈕60秒之內(nèi)不能再次點(diǎn)擊,防止重復(fù)發(fā)送短信
var btn = document.querySelector('button');
btn.addEventListener('click', fn);
function fn() {
//禁用按鈕
this.disabled = true;
//聲明一個(gè)倒計(jì)時(shí)變量
var time = 60;
btn.innerHTML = time;
//設(shè)置定時(shí)器
var timer = setInterval(fn, 1000);
function fn() {
//每一秒就會(huì)讓time自減一下
time--;
//把值給btn
btn.innerHTML = time;
// 判斷當(dāng)?shù)搅?秒后,就會(huì)停止定時(shí)器,解禁按鈕
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '發(fā)送';
}
};
}
</script>
</body>演示結(jié)果:

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í)例
JavaScript 語(yǔ)言的一大特點(diǎn)就是單線程,也就是說(shuō),同一個(gè)時(shí)間只能做一件事。
為了解決這個(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ù)有以下三種類型:
(1)普通事件,如 click、resize 等
(2)資源加載,如 load、error 等
(3)定時(shí)器,包括 setInterval、setTimeout 等
異步任務(wù)相關(guān)回調(diào)函數(shù)添加到任務(wù)隊(duì)列中(任務(wù)隊(duì)列也稱為消息隊(duì)列)。
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í)行。
window 對(duì)象給我們提供了一個(gè) location 屬性用于獲取或設(shè)置窗體的 URL,并且可以用于解析URL 。 因?yàn)?這個(gè)屬性返回的是一個(gè)對(duì)象,所以我們將這個(gè)屬性也稱為 location 對(duì)象。
統(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è)面
代碼演示:
<body>
<button>點(diǎn)我跳轉(zhuǎn)頁(yè)面</button>
<script>
//案例: 5秒鐘之后自動(dòng)跳轉(zhuǎn)頁(yè)面
var btn = document.querySelector('button');
btn.addEventListener('click', fn)
function fn() {
var time = 5;
document.body.innerHTML = '還有' + time + '秒跳轉(zhuǎn)頁(yè)面...';
var timer = setInterval(fn, 1000);
function fn() {
time--;
document.body.innerHTML = '還有' + time + '秒跳轉(zhuǎn)頁(yè)面...';
if (time == 0) {
location.href = 'http://www.itcast.cn';
clearInterval(timer);
}
};
}
</script>
</body>案例: 獲取 URL 參數(shù)數(shù)據(jù)
代碼演示:
<body> <form action="02案例: 獲取 URL 參數(shù)數(shù)據(jù).html"> 用戶名:<input type="text" name="uname"> <input type="submit" value="登錄"> </form> </body>
<body>
<p></p>
<script>
// 第一個(gè)登錄頁(yè)面,里面有提交表單, action 提交到 index.html頁(yè)面
// 第二個(gè)頁(yè)面,可以使用第一個(gè)頁(yè)面的參數(shù),這樣實(shí)現(xiàn)了一個(gè)數(shù)據(jù)不同頁(yè)面之間的傳遞效果
// 第二個(gè)頁(yè)面之所以可以使用第一個(gè)頁(yè)面的數(shù)據(jù),是利用了URL 里面的 location.search參數(shù)
// 在第二個(gè)頁(yè)面中,需要把這個(gè)參數(shù)提取。
// 第一步去掉? 利用 substr
// 第二步 利用=號(hào)分割 鍵 和 值 split(‘=‘)
// 第一個(gè)數(shù)組就是鍵 第二個(gè)數(shù)組就是值
// console.log(location.search);
// 1.截取字符串
var params = location.search.substr(1);//uname = red;
// 2.利用=把字符串分割為數(shù)組 split('=');
var arr = params.split('=');
// 3.把用戶名打印出來(lái)
// console.log(arr[1]);
var p = document.querySelector('p');
p.innerHTML = arr[1];
</script>
</body>
navigator 對(duì)象包含有關(guān)瀏覽器的信息,它有很多屬性,我們最常用的是 userAgent,該屬性可以
返回由客 戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。
下面前端代碼可以判斷用戶那個(gè)終端打開(kāi)頁(yè)面,實(shí)現(xiàn)跳轉(zhuǎn)
代碼演示:
<body>
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebOS
| Symbian | Windows Phone) / i))) {
window.location.href = ""; //手機(jī)
} else {
window.location.href = ""; //電腦
}
</script>
</body>window 對(duì)象給我們提供了一個(gè) history 對(duì)象,與瀏覽器歷史記錄進(jìn)行交互。該對(duì)象包含用戶(在瀏覽器窗口中) 訪問(wèn)過(guò)的 URL。

history 對(duì)象一般在實(shí)際開(kāi)發(fā)中比較少用,但是會(huì)在一些 OA 辦公系統(tǒng)中見(jiàn)到。
.jpg)
關(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è)資訊頻道。
名稱欄目:javascriptBOM瀏覽器對(duì)象模型應(yīng)用實(shí)例分析
路徑分享:http://chinadenli.net/article32/ipgopc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、網(wǎng)站維護(hù)、定制開(kāi)發(fā)、建站公司、搜索引擎優(yōu)化、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)