關于BOM模型

當我們使用浏覽器打開一個網頁程式時，那麼，js系統會自動建立對象，首先建立浏覽器對象window,然後再為window對象建立它的子級對象，最後形成一個樹狀模型，這個就是BOM模型。BOM定義了JavaScript可以進行操作的浏覽器的各個功能部件的接口。

1.BOM對象模型

1.1BOM簡介

BOM 主要處理浏覽器視窗和架構，不過通常浏覽器特定的 JavaScript 擴充都被看做 BOM 的一部分。這些擴充包括：

彈出新的浏覽器視窗

移動、關閉浏覽器視窗以及調整視窗大小

提供 Web 浏覽器詳細資訊的定位對象

提供使用者螢幕分辨率詳細資訊的螢幕對象

對 cookie 的支援

IE 擴充了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 執行個體化 ActiveX 對象

javacsript是通過通路BOM（Browser Object Model）對象來通路、控制、修改用戶端(浏覽器)，由于BOM的window包含了document，window對象的屬性和方法是直接可以使用而且被感覺的，是以可以直接使用window對象的document屬性，通過document屬性就可以通路、檢索、修改XHTML文檔内容與結構。因為document對象又是DOM（Document Object Model）模型的根節點。可以說，BOM包含了DOM(對象)，浏覽器提供出來給予通路的是BOM對象，從BOM對象再通路到DOM對象，進而js可以操作浏覽器以及浏覽器讀取到的文檔。

1.2BOM模型的特點

BOM是browser object model的縮寫，簡稱浏覽器對象模型
BOM提供了獨立于内容而與浏覽器視窗進行互動的對象
由于BOM主要用于管理視窗與視窗之間的通訊，是以其核心對象是window
BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性
BOM缺乏标準，JavaScript文法的标準化組織是ECMA，DOM的标準化組織是W3C
BOM最初是Netscape浏覽器标準的一部分

1.3結構圖

關于BOM模型

1.4用途

BOM中，可以獲得與浏覽器視窗互動的一些對象，例如可以移動，調整浏覽器大小的window對象，可以用于導航的location對象與history對象，可以擷取浏覽器，作業系統與使用者螢幕資訊的navigator與screen對象，可以使用document作為通路HTML文檔的入口，管理架構的frames對象等

2.window對象

從上圖可以看出，window對象是所有對象的最頂級對象

也就是說，以前，我們寫的 document.write() 實際上 window.document.write()

我們建立的所有全局變量和全局函數都是存儲到window對象下的。

BOM的核心是window，而window對象又具有雙重角色，它既是通過js通路浏覽器視窗的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window作為其global對象。

2.1window對象的方法

alert(message) 消息框

confirm(message) 确認框如果點選确定，傳回true,否則傳回false

prompt(message[，defstr]) 輸入框傳回值為使用者輸入的資料

open(url[，name[，features]]) 打開新視窗

close() 關閉視窗

blur() 失去焦點

focus() 獲得焦點

print() 列印

moveBy(x，y) 相對移動

moveTo(x，y) 絕對移動

resizeBy(x，y) 相對改變視窗尺寸

resizeTo(x，y) 絕對改變視窗尺寸

scrollBy(x，y) 相對滾動

scrollTo(x，y) 絕對滾動

setTimeout(表達式，毫秒) 設定定時器執行一次

setInterval(表達式，毫秒) 設定定時器反複執行

clearTimeout(定時器對象) 清除定時器

2.2使用方法舉例

window.close(); //關閉視窗 
 
window.alert("message"); //彈出一個具有OK按鈕的系統消息框，顯示指定的文本 
 
window.confirm("Are you sure?"); //彈出一個具有OK和Cancel按鈕的詢問對話框，傳回一個布爾值 
 
window.prompt("What's your name?", "Default"); //提示使用者輸入資訊，接受兩個參數，即要顯示給使用者的文本和文本框中的預設值，将文本框中的值作為函數值傳回 
 
window.status //可以使狀态欄的文本暫時改變 
 
window.defaultStatus //預設的狀态欄資訊，可在使用者離開目前頁面前一直改變文本 
 
window.setTimeout("alert('xxx')", 1000); //設定在指定的毫秒數後執行指定的代碼，接受2個參數，要執行的代碼和等待的毫秒數 
 
window.clearTimeout("ID"); //取消還未執行的暫停，将暫停ID傳遞給它 
 
window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的代碼，參數同setTimeout()一樣 
 
window.clearInterval("ID"); //取消時間間隔，将間隔ID傳遞給它 
 
window.history.go(-1); //通路浏覽器視窗的曆史，負數為後退，正數為前進 
 
window.history.back(); //同上 
 
window.history.forward(); //同上 
 
window.history.length //可以檢視曆史中的頁面數

2.3window對象的方法使用說明清單

關于BOM模型

2.4window對象詳解

關于BOM模型

3.navigator對象

浏覽器資訊對象，包含大量有關Web浏覽器的資訊，在檢測浏覽器及作業系統上非常有用，也可用window.navigator引用它

常見的屬性

appCodeName ：内部代碼

appName ：浏覽器名稱

appVersion ：版本号

platform ：作業系統

onLine ：是否線上

cookieEnabled ：是否支援cookie

使用說明

navigator.appCodeName //浏覽器代碼名的字元串表示

navigator.appName //官方浏覽器名的字元串表示

navigator.appVersion //浏覽器版本資訊的字元串表示

navigator.cookieEnabled //如果啟用cookie傳回true，否則傳回false

navigator.javaEnabled //如果啟用java傳回true，否則傳回false

navigator.platform //浏覽器所在計算機平台的字元串表示

navigator.plugins //安裝在浏覽器中的插件數組

navigator.taintEnabled //如果啟用了資料污點傳回true，否則傳回false

navigator.userAgent //使用者代理頭的字元串表示

4.location對象

位址欄對象表示載入視窗的URL，也可用window.location引用它

host ：主機名

port ：端口号

href ：完整的url資訊

pathname ：路徑位址

protocol ：協定

search ：查詢字元串

assign(url) ：用于頁面跳轉

使用說明

location.href //目前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm 
 
location.portocol //URL中使用的協定，即雙斜杠之前的部分，如http 
 
location.host //伺服器的名字，如www.wrox.com 
 
location.hostname //通常等于host，有時會省略前面的www 
 
location.port //URL聲明的請求的端口，預設情況下，大多數URL沒有端口資訊，如8080 
 
location.pathname //URL中主機名後的部分，如/pictures/index.htm 
 
location.search //執行GET請求的URL中的問号後的部分，又稱查詢字元串，如?param=xxxx 
 
location.hash //如果URL包含#，傳回該符号之後的内容，如#anchor1 
 
location.assign("http:www.baidu.com"); //同location.href，新位址都會被加到浏覽器的曆史棧中 
 
location.replace("http:www.baidu.com"); //同assign()，但新位址不會被加到浏覽器的曆史棧中，不能通過back和forward通路 
 
location.reload(true | false); //重新載入目前頁面，為false時從浏覽器緩存中重載，為true時從伺服器端重載，預設為false

5.screen對象

螢幕資訊對象，用于擷取某些關于使用者螢幕的資訊，也可用window.screen引用它

常用的屬性

availHeight 可用高度

availWidth 可用寬度

colorDepth 顔色品質

height 高度

width 寬度

使用說明

screen.width/height //螢幕的寬度與高度，以像素計

screen.availWidth/availHeight //視窗可以使用的螢幕的寬度和高度，以像素計

screen.colorDepth //使用者表示顔色的位數，大多數系統采用32位

window.moveTo(0, 0);

window.resizeTo(screen.availWidth, screen.availHeight); //填充使用者的螢幕

6.document對象

文檔對象，實際上是window對象的屬性，document == window.document為true，是唯一一個既屬于BOM又屬于DOM的對象

常用屬性和方法

linkColor 超連結顔色

alinkColor 作用中的超連結顔色

vlinkColor 作用後的超連結顔色

bgColor 背景顔色

fgColor 字型顔色

title 文檔标題

getElementById(“id”)

通過id屬性值擷取某個元素

getElementsByName(“name”)

通過name屬性值擷取某些元素

getElementsByTagName(“tagname”)

通過标簽名擷取某些元素

使用說明

document.lastModified //擷取最後一次修改頁面的日期的字元串表示

document.referrer //用于跟蹤使用者從哪裡連結過來的

document.title //擷取目前頁面的标題，可讀寫

document.URL //擷取目前頁面的URL，可讀寫

document.anchors[0]或document.anchors["anchName"] //通路頁面中所有的錨

document.forms[0]或document.forms["formName"] //通路頁面中所有的表單

document.images[0]或document.images["imgName"] // 通路頁面中所有的圖像

document.links [0]或document.links["linkName"] //通路頁面中所有的連結

document.applets [0]或document.applets["appletName"] //通路頁面中所有的Applet

document.embeds [0]或document.embeds["embedName"] //通路頁面中所有的嵌入式對象

document.write(); 或document.writeln(); //将字元串插入到調用它們的位置

7.使用舉例

7.1關于navigator、screen、location的使用

navigator.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
	-->
<script type="text/javascript">
//location對象
//location.href='index.jsp';
//screen對象
var width = window.screen.width;
var height = window.screen.height;
document.write('您螢幕的分辨率為：'+width+'*'+height+'<br/>');
//navigator對象
document.write(navigator.appCodeName+'<br/>');
document.write(navigator.appName+'<br/>');
document.write(navigator.appVersion+'<br/>');
document.write(navigator.platform+'<br/>');
document.write(navigator.cookieEnabled+'<br/>');
document.write(navigator.onLine+'<br/>');
//判斷用戶端是哪種浏覽器
var version = navigator.appVersion;
if(version.indexOf('MSIE')>0){
	alert('IE');
}else{
	alert('W3C');
}
</script>
<style type="text/css">
#div1{width:400px;height: 400px;background: red;}
#div2{width:300px;height: 300px;background: green;}
#div3{width:200px;height: 200px;background: blue;}
</style>
  </head>
  
  <body>
</body>
</html>

運作結果

關于BOM模型

firefox

關于BOM模型

7.2關于document的使用

useDocument.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    
    <title>My JSP 'inlineBinding.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
	-->
<script type="text/javascript">
//使用document
window.οnlοad=function(){
	//getElementById的使用
	document.getElementById("btn1").οnclick=function(){
		document.getElementById("div1").innerHTML='Hello,javascript';
		document.getElementById("div1").style.color='red';
	};
	//getElementsByTagName的使用
	document.getElementById("btn2").οnclick=function(){
		var div = document.getElementsByTagName("div");
		for(var i=0,len=div.length;i<len;i++){
			div[i].style.color='blue';
		}
	};
	//getElementsByName的使用
	document.getElementById("btn3").οnclick=function(){
		var div = document.getElementsByName("ft");
		for(var i=0,len=div.length;i<len;i++){
			div[i].value='Hello!';
		}
	};
};
</script>
  </head>
  
  <body>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <input type="button" name="ft" id="btn1" value="byid"/>
  <input type="button" name="ft" id="btn2" value="bytagname"/>
  <input type="button" name="ft" id="btn3" value="byname"/>
</body>
</html>

運作結果

關于BOM模型

以上即為javascript中的BOM模型的簡單介紹，需要在實際的運用中仔細體會。

關于BOM模型

1.BOM對象模型

1.1BOM簡介

1.2BOM模型的特點

1.3結構圖

1.4用途

2.window對象

2.1window對象的方法

2.2使用方法舉例

2.3window對象的方法使用說明清單

2.4window對象詳解

3.navigator對象

4.location對象

5.screen對象

6.document對象

7.使用舉例

7.1關于navigator、screen、location的使用

7.2關于document的使用

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條