BOM與DOM的結構層次圖
BOM對象是什麼
- BOM：瀏覽器對象模型(Brower Object Model)，是用於操作瀏覽器而出現的API，BOM對象則是Javascript對BOM接口的實現。
- BOM提供了獨立於內容的、可以與瀏覽器窗口進行交互的對象結構。通過BOM對象可以訪問瀏覽器功能部件和屬性。
- BOM中代表瀏覽器窗口的window對象是Javascript頂層對象，其他BOM對象均爲window對象的子對象。被作爲window對象的屬性來引用。
- 其他BOM對象都是在window對象中進行操作。
DOM對象是什麼
DOM：文檔對象模型（Document Object Model），是W3C定義的一套用於處理HTML和XML文檔內容的標準編程接口API。javascript實現DOM接口的對象對應的是document對象，JS通過該對象來對HTML/XML文檔進行增刪改查。DOM定義了HTML和XML的邏輯結構，將整個頁面劃分成由層次節點構成的文檔，以樹的形式來展現，如上面那張圖所示。在BOM和DOM結構層次圖中，document對象屬於window對象，所以DOM也可以看作是BOM的一部分。BOM對象大小寫的區別
在查找BOM資料時，總會看到有的叫做Window對象、有的叫做window對象這種情況，和JS數據類型中的對象類型和基本類型的問題一樣，非常容易令人搞混淆兩者概念，很不嚴謹。關於此問題，所以在這裏將它們的概念理清楚，才能更好的理解基礎，而不是隻會用window、document對象來完成操作。
都知道，在開發中，都有一些約定俗成的編程規範。例如面嚮對象語言中的類名一般採用大寫，包括接口、枚舉和註解等，而對象名、變量名一般採用小寫，方法採用駝峯寫法。它們的目的都是爲了方便區分，這些規範放在JS中，也是通用的。這裏我採用vs code來演示它們的作用：
從上面圖例中，可以很清楚的看到Window和Document其實是接口，而window、document和location這種纔是真正的對象，這些BOM對象就是實現這些BOM接口的實例，而且是單例模式。所以我們不能自己隨意創建BOM對象。
PS：在學習一個知識點時，除了多寫相關代碼之外，還需要去深入瞭解下所學的知識點，才能鞏固基礎。這樣才能明白自己在用什麼，以及該怎麼去用，這樣來學習纔會事半功倍，而且知識記得很牢。當以後遇到相關問題時，就可以避免一些沒必要的坑。
下面將介紹每個BOM對象的作用與用法。由於篇幅問題，DOM對象的相關知識放在後續博客文章中進行介紹。
- window對象 ：表示瀏覽器窗口，是JS的頂層對象。
- location對象：瀏覽器當前的URL信息。
- navigator對象：瀏覽器本身信息。
- history對象：瀏覽器的瀏覽歷史記錄信息。
- screen對象：瀏覽器的屏幕信息。
- document對象：代表當前窗口的網頁文檔。該對象是JS對DOM的具體實現，本篇章不談論其用法。
window對象
- 是BOM對象的核心，JS的頂層對象，瀏覽器窗口只要打開一個HTML文檔，瀏覽器就會爲我們創建一個window對象。
- window對象是JS中的全局對象，可以在任何地方調用，而且任何對象的使用都會追溯到對window對象的訪問，所以在使用window對象的屬性和方法時，可以省略window這個前綴。看起來很像with語句塊的作用。
- 簡寫案例：window.alert() ，可以直接用alert(). window.document.write(),可以簡寫成document.write()
下面的屬性和方法只是常用部分，如果想了解全部屬性和方法，可以點擊http://www.w3school.com.cn/jsref/dom_obj_window.asp查看window對象資料。
| window對象屬性值 | 描述 |
|---|---|
| closed | 返回窗口是否已被關閉。true是已關閉，false是未關閉。 |
| defaultStatus | 設置或返回窗口狀態欄中的默認文本。 |
| document | 對 Document 對象的只讀引用。請參閱 Document 對象。 |
| history | 對 History 對象的只讀引用。請參數 History 對象。 |
| location | 用於窗口或框架的當前的URL信息。請參閱 Location 對象。 |
| navigator | 對 Navigator 對象的只讀引用。請參數 Navigator 對象。 |
| screen | 對 Screen 對象的只讀引用。請參數 Screen 對象。 |
| length | 設置或返回窗口中的框架數量。 |
| name | 設置或返回窗口的名稱。 |
| opener | 返回對創建此窗口的窗口引用。即父窗口。 |
| status | 設置窗口狀態欄的文本。 |
| self、window | 返回對當前窗口的引用。等價於 window 屬性。它包含了對窗口自身的引用。 |
| window對象常用方法 | 描述 |
|---|---|
| 顯示帶有一段消息和一個確認按鈕的對話框。 | |
| open() | 打開一個新瀏覽器窗口或查找一個已命名的窗口。可以獲得該窗口的window對象。 |
| confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。確定則返回true，取消則false。 |
| prompt() | 顯示可提示用戶輸入的對話框。 |
| setInterval() | 按照指定的週期（以毫秒計）來調用函數或計算表達式。 |
| setTimeout() | 在指定的毫秒數後調用函數或計算表達式。只會執行一次。 |
| clearInterval() | 取消由 setInterval() 方法設置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設置的 timeout。 |
| close() | 關閉瀏覽器窗口。 |
| print() | 打印當前窗口的內容。 |
<body>
<!-- 加載網頁文檔後，彈出對話框，點擊確定後關閉當前網頁 -->
<script>
window.onload = function(){
alert("點擊確定後，網頁就關閉了");
window.close();
}
</script>
網頁文檔加載完成~
</body><body window.onunload = "closeChild()"> <!-- 頁面關閉事件 -->
<script type="text/javascript">
var newWindow; //接收子窗口的window對象
// 打開一個新窗口
function openHTML(){
newWindow = window.open("./時間顯示與暫停.html", "_blank","width=100, height=100,toolbar = no");
}
//當前頁面關閉時，先關閉子窗口
function closeChild(){
//子窗口未關閉
if(!newWindow.closed){
newWindow.close();
}
}
</script>
<button onclick="openHTML()">打開新窗口</button> <!-- 單擊事件 -->
</body><!-- 點擊按鈕實現時間的暫停和顯示 -->
<body>
<script>
//每隔1s就加載一次顯示時間函數
var interval = window.setInterval("displayTime()", 999);
//頁面加載完成就顯示時間
window.onload = displayTime;
//顯示時間
function displayTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hh = date.getHours();
var mm = date.getMinutes();
var ss = date.getSeconds();
var currentTime = year + "/" + month + "/" + day + "/" + hh + ":" + mm + ":" + ss + "秒";
//將當前時間內容賦給指定DOM節點
document.getElementById('display-time').innerText = currentTime;
}
//暫停時間和顯示時間
function stopTime(){
//時間還在持續顯示,時間暫停
var text = document.getElementById('btn-time').innerText;
if(text == '暫停時間'){
window.clearInterval(interval); //清除周期函數，時間暫停
document.getElementById('btn-time').innerText = "顯示時間"; //修改按鈕文本內容
}else{
//這裏執行的周期函數的返回值和之前一樣。這樣才能同時關閉！
interval = window.setInterval("displayTime()", 999);
document.getElementById('btn-time').innerText = "暫停時間"; //修改按鈕文本內容
}
}
</script>
<button onclick = "stopTime()" id="btn-time">暫停時間</button>
<p id="display-time"></p>
</body>location對象
- 可以獲取當前頁面的URL所有信息，而且還能和a標籤一樣，用assign()做跳轉，reload()用於刷新。比較常用。
| location對象屬性 | 描述 |
|---|---|
| 設置或返回從井號 (#) 開始的 URL（錨）。 | |
| host | 設置或返回主機名和當前 URL 的端口號。 |
| hostname | 設置或返回當前 URL 的主機名。 |
| href | 設置或返回完整的 URL。 |
| pathname | 設置或返回當前 URL 的路徑部分。 |
| protocol | 設置或返回當前 URL 的協議。 |
| port | 設置或返回當前 URL 的端口號。 |
| search | 設置或返回從問號 (?) 開始的 URL（查詢部分）。 |
| location對象方法 | 描述 |
| assign() | 加載新的文檔。 |
|
reload() |
重新加載當前文檔。 |
|
replace() |
用新文檔代替當前文檔。 |
location對象實例
<!-- 這裏要用到服務器才能更好地體現其作用，使用的是JSP -->
<body>
<script type="text/javascript">
window.onload = function(){
document.writeln("錨點：" + location.hash + "<br>");
document.writeln("主機名和端口號：" + location.host + "<br>");
document.writeln( "主機名：" + location.hostname + "<br>");
document.writeln( "完整URL：" + location.href + "<br>");
document.writeln( "協議：" + location.protocol + "<br>");
document.writeln( "URL路徑：" + location.pathname + "<br>");
document.writeln( "URL參數：" + location.search + "<br>");
}
</script>
<form action="#" method="get">
用戶：<input type="text" name="username"/><br>
密碼：<input type="text" name="pwd"/><br>
<input type="submit" value="提交"/><br>
</form>
</body>
錨點：
主機名和端口號：localhost:8088
主機名：localhost
完整URL：http://localhost:8088/TestOk/index.jsp?username=admin&pwd=123456
協議：http:
URL路徑：/TestOk/index.jsp
URL參數：?username=admin&pwd=123456
navigator對象
- 該對象的屬性描述當前正在使用的瀏覽器信息，如下。至於該對象的方法基本不怎麼用，所以就不給出了。
| navigator對象屬性 | 描述 |
|---|---|
| 返回瀏覽器的代碼名。 | |
| appMinorVersion | 返回瀏覽器的次級版本。 |
| appName | 返回瀏覽器的名稱。 |
| appVersion | 返回瀏覽器的平臺和版本信息。 |
| browserLanguage | 返回當前瀏覽器的語言。 |
| cookieEnabled | 返回指明瀏覽器中是否啓用 cookie 的布爾值。 |
| cpuClass | 返回瀏覽器系統的 CPU 等級。 |
| onLine | 返回指明系統是否處於脫機模式。true則沒聯網，false則是聯網。 |
| platform | 返回運行瀏覽器的操作系統平臺。 |
| systemLanguage | 返回 OS 使用的默認語言。 |
|
userAgent |
返回由客戶機發送服務器的 user-agent 頭部的值。 |
|
userLanguage |
返回 OS 的自然語言設置。 |
//其他屬性大同小異，就不過多演示了
//在控制檯查看
console.log("瀏覽器名稱：" + window.navigator.appName);
console.log("瀏覽器版本：" + navigator.appVersion);
console.log("服務器發送的頭部值：" + navigator.userAgent);history對象
- 該對象保存了用戶上網的歷史記錄。爲了安全考慮，開發人員無法獲得用戶瀏覽器的URL。但能通過歷史列表來進行前進和後退網頁。
- 它提供的back()和forward()就是模擬瀏覽器本身自帶的回退和前進功能。
- 因爲該對象很少用到，所以就不給實例了。這些方法都很簡單，可以自己寫代碼來驗證。
| history對象屬性 | 描述 |
|---|---|
| 返回瀏覽器歷史列表中的 URL 數量。 | |
| history對象方法 | 描述 |
| back() | 加載 history 列表中的前一個 URL。 |
| forward() | 加載 history 列表中的下一個 URL。 |
| go() | 加載 history 列表中的某個具體頁面。 |
screen對象
- screen對象存放着有關顯示瀏覽器屏幕的信息。可以通過JS拿到這些信息，從而做出一些優化。
- 它的使用方式很簡單，使用screen.屬性的方式就能獲得對應信息。該對象在JS中基本用不到，所以這裏就不給出實例了。
| screen對象屬性 | 描述 |
|---|---|
| availHeight | 返回顯示屏幕的高度 (除 Windows 任務欄之外)。 |
| availWidth | 返回顯示屏幕的寬度 (除 Windows 任務欄之外)。 |
| bufferDepth | 設置或返回調色板的比特深度。 |
| colorDepth | 返回目標設備或緩衝器上的調色板的比特深度。 |
| deviceXDPI | 返回顯示屏幕的每英寸水平點數。 |
| deviceYDPI | 返回顯示屏幕的每英寸垂直點數。 |
| fontSmoothingEnabled | 返回用戶是否在顯示控制面板中啓用了字體平滑。 |
| height | 返回顯示屏幕的高度。 |
| logicalXDPI | 返回顯示屏幕每英寸的水平方向的常規點數。 |
| logicalYDPI | 返回顯示屏幕每英寸的垂直方向的常規點數。 |
| pixelDepth | 返回顯示屏幕的顏色分辨率（比特每像素）。 |
| updateInterval | 設置或返回屏幕的刷新率。 |
| width | 返回顯示器屏幕的寬度。 |