JavaScript 瀏覽器對(duì)象模型BOM原理與常見(jiàn)用法實(shí)例分析
本文實(shí)例講述了JavaScript 瀏覽器對(duì)象模型BOM原理與常見(jiàn)用法。分享給大家供大家參考，具體如下：
什么是BOM
BOM：Browser Object Model，瀏覽器對(duì)象模型
從上圖也可以看出：
- window對(duì)象是BOM的頂層(核心)對(duì)象，所有對(duì)象都是通過(guò)它延伸出來(lái)的，也可以稱為window的子對(duì)象。
- DOM是BOM的一部分。
window對(duì)象：
- window對(duì)象是JavaScript中的頂級(jí)對(duì)象。
- 全局變量、自定義函數(shù)也是window對(duì)象的屬性和方法。
- window對(duì)象下的屬性和方法調(diào)用時(shí)，可以省略window。
彈出系統(tǒng)對(duì)話框
比如說(shuō)，alert(1)是window.alert(1)的簡(jiǎn)寫(xiě)，因?yàn)樗莣indow的子方法。
系統(tǒng)對(duì)話框有三種：
alert(); //不同瀏覽器中的外觀是不一樣的 confirm(); //兼容不好 prompt(); //不推薦使用
打開(kāi)窗口、關(guān)閉窗口
打開(kāi)窗口
window.open(url,target)
參數(shù)解釋：
- url：要打開(kāi)的地址。
- target：新窗口的位置?？梢允牵篲blank 、_self、 _parent 父框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行間的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飛學(xué)城</button>
<button>打開(kāi)百度</button>
<button onclick="window.close()">關(guān)閉</button>
<button>關(guān)閉</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打開(kāi)空白頁(yè)面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否關(guān)閉？")){
close();
}
}
</script>
</html>
<body>
<!--BOM使用的是window.開(kāi)頭的語(yǔ)句-->
<!--history模式和 hash模式-->
<!--history模式： xxxx/#/index.html-->
<!--hash模式：xxxx/index.html-->
<button id="btn">跳轉(zhuǎn)</button>
<script>
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
console.log(location);
//打開(kāi)百度，下面三種方式皆可
// location.;
// open('http://www.baidu.com','_self');
window.open('http://www.baidu.com','_self');//在當(dāng)前頁(yè)面打開(kāi)
window.location.reload();//刷新或者叫重載
}
</script>
</body>
location對(duì)象
window.location可以簡(jiǎn)寫(xiě)成location。location相當(dāng)于瀏覽器地址欄，可以將url解析成獨(dú)立的片段。
location對(duì)象的屬性
- href：跳轉(zhuǎn)
- hash 返回url中#后面的內(nèi)容，包含#
- host 主機(jī)名，包括端口
- hostname 主機(jī)名
- pathname url中的路徑部分
- protocol 協(xié)議 一般是http、https
- search 查詢字符串
舉例：5秒后自動(dòng)跳轉(zhuǎn)到百度。
有時(shí)候，當(dāng)我們?cè)L問(wèn)一個(gè)不存在的網(wǎng)頁(yè)時(shí)，會(huì)提示5秒后自動(dòng)跳轉(zhuǎn)到指定頁(yè)面，此時(shí)就可以用到location
<script>
setTimeout(function () {
location.;
}, 5000);
</script>
location.reload():重新加載,這個(gè)加載是 全局刷新，讓整個(gè)文檔重新解析了一遍，一般不建議使用
setTimeout(function(){
//3秒之后讓網(wǎng)頁(yè)整個(gè)刷新
window.location.reload();
},3000)
navigator對(duì)象
window.navigator 的一些屬性可以獲取客戶端的一些信息。
- userAgent：系統(tǒng)，瀏覽器)
- platform：瀏覽器支持的系統(tǒng)，win/mac/linux
console.log(navigator.userAgent); console.log(navigator.platform);
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解
這篇文章主要為大家介紹了JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒
我們?cè)谧鲂〕绦蛑Ц断嚓P(guān)的開(kāi)發(fā)時(shí),總會(huì)遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了用javascript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js+css實(shí)現(xiàn)有立體感的按鈕式文字豎排菜單效果
這篇文章主要介紹了js+css實(shí)現(xiàn)有立體感的按鈕式文字豎排菜單效果,通過(guò)javascript動(dòng)態(tài)調(diào)用頁(yè)面元素樣式實(shí)現(xiàn)豎排菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
之前做項(xiàng)目的時(shí)候在實(shí)現(xiàn)表單中file類型input選擇多圖片時(shí)有很多種實(shí)現(xiàn)方法，今天小編給大家分享基于php實(shí)現(xiàn)一種多文件上傳的方法，需要的朋友參考下吧2017-09-09
showModalDialog模態(tài)對(duì)話框的使用詳解以及瀏覽器兼容
showModalDialog是jswindow對(duì)象的一個(gè)方法，和window.open一樣都是打開(kāi)一個(gè)新的頁(yè)面。區(qū)別是：showModalDialog打開(kāi)子窗口后，父窗口就不能獲取焦點(diǎn)了（也就是無(wú)法操作了）2014-01-01
JS利用cookies設(shè)置每隔24小時(shí)彈出框
這篇文章主要介紹了利用cookies設(shè)置每隔24小時(shí)彈出框的實(shí)例代碼,需要的朋友可以參考下2017-04-04
使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼
這篇文章主要介紹了使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
js控制fieldset高度的代碼...2007-11-11
這篇文章介紹了js控制表單奇偶行樣式的簡(jiǎn)單方法，有需呀偶的朋友可以參考一下2013-07-07