BOM對象-JavaScript筆記
什麼是BOM
BOM - 浏覽器對象模型（BrowserObjectModel）
浏覽器對象模型(Browser Object Model,簡稱BOM)是浏覽器的内置對象管理模型。
可以對浏覽器視窗進行通路和操作。使用 BOM，開發者可以移動視窗、改變狀态欄中的文本以及執行其他與頁面内容不直接相關的動作。
在前端頁面開發時，可以通過對浏覽器的内置對象進行控制，提高Html頁面的動态效果，增強使用者對頁面檔案的體驗。
BOM對象模型結構
後續可以根據該圖協助了解
window對象
window對象-BOM核心
BOM 的操作入口為 window 對象，即浏覽器下的全局對象
window，顧名思義，視窗對象。它表示整個浏覽器視窗，主要用來操作浏覽器視窗。同時， window對象還是 ECMAScript（JavaScript的一個标準）中的 Global （全局）對象，因而所有全局變量和函數都是它的屬性，且所有原生的構造函數及其他函數也都存在于它的命名空間下。
- 所有浏覽器都支援window對象。它表示浏覽器視窗
- —個html文檔對應—個window對象
- 控制浏覽器視窗的
- window對象不需要建立對象，直接使用即可
- 所有JavaScript全局對象、函數以及變量均自動成為window對象的成員
挂載在window對象上的全局方法：
彈框類的方法。前面省略window
alert(‘提示資訊’)
confirm(“确認資訊”)
prompt(“彈出輸入框”)
open(“url位址”，“_black或_self”，“新視窗的大小”）
close() 關閉目前的網頁
定時器，清除定時器
setTimeout(函數，時間) 隻執行一次
clearTimeout(定時器名稱) 清除定時器，用于停止執行setTimeout()方法的函數代碼。
setInterval(函數，時間) 無限執行
clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼。
Cookies 用于存儲 web 頁面的使用者資訊。
JavaScript 可以使用 document.cookie 屬性來建立 、讀取、及删除 cookies。
document.cookie 将以字元串的方式傳回所有的 cookies，類型格式： cookie1=value; cookie2=value; cookie3=value;
全局變量
1-聲明在最外層的變量為全局變量（聲明在函數内部為局部變量）
2-将變量挂載到window對象上即為全局變量（可省略window，即隐式聲明）
如果需要聲明全局變量，盡量選擇在最外層var 變量名的方式聲明，
也可以使用window.變量名的方式，但盡量不要使用隐式聲明
（ 區分顯示聲明與隐式聲明當我們使用通路一個沒有聲明的變量時，JS會報錯；而當我們給一個沒有聲明的變量指派時，JS不會報錯，相反它會認為我們是要隐式聲明一個全局變量 更多）
window對象常用方法
打開一個新視窗
window.open()
window.open(“url位址”，“_black或_self或視窗名稱”，“新視窗的大小width、height、left、top”）
關閉目前視窗
window.close()
window對象常用屬性
window對象常用事件
1.頁面加載事件
用于在網頁加載完畢後立刻執行的操作
方式1：window.onload = function(){ }
window.addEventListener(‘load’,function(){ })
window.onload 是視窗（頁面）加載事件，當文檔内容完全加載成功，就會觸發該事件（包括圖像，腳本檔案，CSS檔案等），就調用的處理函數。
注意：
1.有了 window.pnload 就可以把JS代碼寫到頁面元素的上方，因為 onload 是等頁面内容全部加載完畢，再去執行處理函數。
2.window .onload 傳統注冊事件方式隻能寫一次，如果有多個，會議最後一個 window.onload 為準。
3.如果使用 addEventListener 則沒有限制
方式2：document.addEventListener(‘DOMContentLoaded’,function(){ })
即：window.οnlοad=匿名函數
DOMContentLoaded 事件觸發時，僅當 DOM 加載完成，不包括樣式表，圖檔，flash等等。IE9以上才支援
注意：
如果頁面的圖檔很多的話，從使用者通路到 onload 觸發可能需要較長的時間，互動效果就不能實作，必然影響使用者體驗，此時用DOMContentLoaded 時間比較合适。
2.調整視窗大小事件
window.onresize = function(){ }
window.addEventLisener(‘load’,function(){});
window.onload 是調整視窗大小加載事件，當觸發時就調用是處理函數
注意：
1.隻要視窗大小發生像素變化就會觸發這個事件
2.經常利用這個事件完成響應式布局，window.innerWidth 目前螢幕寬度。innerHeight 目前螢幕高度
3.定時器（兩種方式）
1.setTimeout( ) （方式一）
文法規範：window.setTimeout(調用函數，延時時間)； // 這裡的調用函數，也稱作是回調函數 callback
1.這個 window 在調用時可以省略
2.這個延時時間機關是毫秒，可以省略不寫，如果省略預設是0，立即執行
3.這個調用函數可以直接寫函數（callback），還可以寫函數名（‘callback( )’）
4.頁面中可能有很多的定時器，我們經常給定時器加辨別符（名字）區分
案例：（三種寫法）
方式1：
setTimeout(function(
console.log(‘時間到了’);
){},3000)
方式2：
function callback(){
console.log(‘時間到’);
}
var timer1 = setTimeout(callback,3000);
方式3：
var timer2 = setTimeout(‘callback()’,5000); //不推薦使用
2.setInterval( )（方式二）
window.setInterval(回調函數，[ 間隔的毫秒 ])；
setInterval( ) 方法重複調用一個函數，每隔這個時間，就去調用一次回調函數
3.setTimeout 和 setInterval 的差別：
3.1 setTimeout 延時時間到了，就去調用這個回調函數，隻調用一次就結束這個定時器
3.2 setInterout 每隔這個延時時間，就去調用這個回調函數，會調用很多次，重複調用這個函數
2.清除定時器（兩種方式）
1.clearTimeout（方式一）
window.clearTimeout( timeoutID ); // window 也可以省略
裡面的參數就是定時器的辨別符
clearTimeout( ) 方法取消了之前通過調用 setTimeout( ) 建立的定時器
案例：
var timer = setTimeout(function(){
console.log(‘彈出來了’);
},2000);
btn.addEventListener(‘click’,function(){
clearTimeout( timer );
})
2.clearInterval( )（方式二）
var timer= null ; // 設定成全局變量，才能在不同函數中使用
btns[0].οnclick=function(){
timer=setInterval(function(){
console.log(‘123’);
},1000);
}
btns[1].οnclick=function(){
clearInterval(timer);
}
location對象
location 對象
對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面。
window.location 對象在編寫時可不使用 window 這個字首。 一些例子：
location.herf = ‘url位址’
location.hostname 傳回 web 主機的域名
location.pathname 傳回目前頁面的路徑和檔案名
location.port 傳回 web 主機的端口 （80 或 443）
location.portocol 傳回頁面使用的web協定。 http:或https:
navigator對象
navigator 對象
對象提供了與浏覽器有關的資訊。userAgent是最常用的屬性，用來完成浏覽器判斷。
window.navigator 對象在編寫時可不使用 window 這個字首。
screen對象
主要用來擷取使用者的螢幕資訊。
window.screen對象在編寫時可以不使用 window 這個字首
height: 擷取整個螢幕的高。
width : 擷取整個螢幕的寬。
availHeight: 整個螢幕的高減去系統部件的高（ 可用的螢幕寬度 ）
availWidth : 整個螢幕的寬減去系統部件的寬（可用的螢幕高度 ）
history對象
history 對象
對象包含浏覽器的曆史。
window.history對象在編寫時可不使用 window 這個字首。
back() 傳回上一頁。
forward() 傳回下一頁。
go(“參數”) -1表示上一頁，1表示下一頁。
frames架構
如果頁面中包含架構，則每個架構都擁有自己的window對象，并且儲存在frames集合中
在父頁面中，可通過window.frames[“frame1”]通路子頁面的window對象（需等frame加載完畢）
在子頁面中，可通過window.parent通路父頁面的window對象（需等frame加載完畢）
子調父：
元素：
① window.parent.document.getElementById(“父頁面元素ID”);
②window.parent.document.getElementsByTagName(“父頁面元素标簽名”)[i];
③window.parent.document.getElementsByClassName(“父頁面元素類名”)[i];
方法：window.parent.父頁面方法;
父調子：
元素：window.frames[iframe的name屬性值];
方法：
① document.getElementById(“子頁面元素ID”).contentWindow.子頁面方法名;
② document.getElementsByTagName(“子頁面元素标簽名”)[i].contentWindow.子頁面方法名;
③ document.getElementsByClassName(“子頁面元素類名”)[i].contentWindow.子頁面方法名;
文中部分内容來源網絡搜尋，此文僅為學習使用