JavaScript基礎複習(三) BOM詳解
又來學習BOM了，哈哈，Boooooom
一、BOM概述
BOM（Browser Object Model）即瀏覽器物件模型，是前端操作瀏覽器的核心，該物件提供了與瀏覽器互動相關物件結構。BOM由多個子物件組成，其核心為window物件，它是BOM的頂層物件。
二、window
表示在瀏覽器環境中的一個全域性的頂級物件，所有在瀏覽器環境中使用的物件都是window物件的子物件。它有非常多的屬性和方法。
1、window 物件的屬性
| closed |
當視窗關閉時為真 |
| defaultStatus |
視窗底部狀態列顯示的預設狀態訊息 |
| document |
視窗中當前顯示的文件物件 |
| frames |
視窗中的框架物件陣列 |
| history |
儲存著視窗最近載入的URL |
| length |
視窗中的框架數 |
| location |
當前視窗的URL |
| name |
視窗名 |
| offscreenBuffering |
用於繪製新視窗內容並在完成後複製已存在的內容，控制螢幕更新 |
| opener |
開啟當前視窗的視窗 |
| parent |
指向包含另一個視窗的視窗（由框架使用） |
| screen |
顯示螢幕相關資訊，如高度、寬度（以畫素為單位） |
| self |
指示當前視窗 |
| status |
描述由使用者互動導致的狀態列的臨時訊息 |
| top |
包含特定視窗的最頂層視窗（由框架使用） |
| window |
指示當前視窗，與self 等效 |
開啟 F12 console即可驗證
說一說視窗尺寸的獲取
涉及不同瀏覽器的相容性問題，在這裡做一個總結。
視窗位置
IE、Safari、Opera 和Chrome 支援
screenLeft 視窗相對於螢幕左邊的位置
screenTop 視窗相對於螢幕上邊的位置
firefox 支援
screenX 視窗相對於螢幕左邊的位置
screenY 視窗相對於螢幕上邊的位置
相容處理：
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;視窗大小
IE、Firefox、Safari、Opera 和Chrome 均支援
innerWidth和innerHeight，返回瀏覽器視窗本身的尺寸；
outerWidth 和outerHeight，返回瀏覽器視窗本身及邊框的尺寸。
舊版IE：
document.documentElement.clientWidth document.documentElement.clientHeight
相容怪異模式
document.body.clientWidth; //非標準模式使用body document.body.clientHeight;
終版相容
function client() {
return {
clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
};
}其他：
window.pageYOffset（pageXOffset)：瀏覽器視窗頂部與文件頂部之間的距離（瀏覽器視窗與文件左側之間的距離）也就是滾動條滾動的距離。
scroll系列 document.documentElement
| scrollHeight和scrollWidth |
物件內部的實際內容的高度/寬度（不包括border） |
| scrollTop和scrollLeft |
被捲去部分的頂部/左側 到 可視區域 頂部/左側 的距離 |
| onscroll事件 |
滾動條滾動觸發的事件 |
| 頁面滾動座標 |
var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0; |
offset系列 document.documentElement
| offsetWidth和offsetHeight |
offsetHeight的構成 |
offsetHeight = height + padding + border offsetWidth相同 |
|
|
offsetHeight和style.height的區別 |
1. demo.style.height只能獲取行內樣式，否則無法獲取到 2. .style.height是字串（有單位px）， offsetHeight是數值（無單位） 3. .style.height可以設定行內樣式，但offsetHeight是隻讀屬性，不可設定 所以：demo.style.height獲取 某元素的真實高度/寬度，用.style.height來設定高度/寬度 |
| offsetLeft和offsetTop |
offsetLeft的構成 |
1，到距離自身最近的（帶有定位的）父元素的 左側/頂部 2，如果所有父級元素都沒有定位，則以body為準 3，offsetLeft是自身border左側到父級padding左側的距離 |
|
|
offsetLeft和style.left的區別 |
1，style.left只能獲取行內樣式 2，offsetLeft只讀，style.left可讀可寫 3，offsetLeft是數值，style.left是字串並且有單位px 4，如果沒有定位，style.left獲取的數值可能是無效的 5，最大的區別：offsetLeft以border左上角為基準， style.left以margin左上角為基準 |
| offsetParent |
構成 |
1. 返回該物件距離最近的帶有定位的父級元素 2. 如果當前元素的所有父級元素都沒有定位（position為absolute或relative），那麼offsetParent為body 3. offsetLeft獲取的就是相對於offsetParent的距離 |
|
|
與parentNode的區別 |
parentNode始終指向的是當前元素的最近的父元素，無論定位與否 |
延伸：https://blog.csdn.net/csdnxcn/article/details/77886499
1.1 location物件
表示與當前載入的視窗相關的資訊，包括url路徑等。
| 屬性 |
描述的URL內容 |
| host |
設定或返回主機名和當前 URL 的埠號。 |
| hostname |
設定或返回當前 URL 的主機名 |
| href |
設定或返回完整的 URL |
| pathname |
設定或返回當前 URL 的路徑部分 |
| port |
設定或返回當前 URL 的埠號。預設情況下，大多數URL沒有埠資訊（預設為80埠）返回為空 |
| protocol |
設定或返回當前 URL 的協議,即雙斜槓（//）之前的部分 |
| search |
設定或返回從問號 (?) 開始的 URL（查詢部分）。 |
| hash |
設定或返回從井號 (#) 開始的 URL（錨）。 |
| origin |
協議名、主機名和埠號。 |
| 方法 |
功能 |
| assign() |
跳轉到指定頁面，與href等效 |
| reload() |
過載當前URL |
| repalce() |
用新的URL 替換當前頁面,可以避免產生跳轉前的歷史記錄，跳轉後瀏覽器不能返回上一個頁面 |
| toString() |
獲取當前頁面的完整URL，相當於location.href |
1.2 navigator物件
關於web瀏覽器的有關資訊，可以用於檢測瀏覽器和作業系統，navigator物件中的屬性是隻讀的。
| 屬性 |
描述內容 |
| userAgent |
使用者代理頭資訊，很多時候用於判斷瀏覽器 |
| appCodeName |
瀏覽器程式碼名 |
| appName |
官方瀏覽器名稱，該屬性並不一定能返回正確的瀏覽器名稱 |
| appVersion |
瀏覽器版本資訊 |
| cookieEnabled |
是否使用cookie 值為true/false |
| platform |
瀏覽器所在計算機平臺 |
| plugins |
瀏覽器上所安裝的外掛 陣列。 |
| onLine |
使用者當前線上還是離線（瀏覽器斷線)值為true/false |
| cpuClass |
瀏覽器正在執行的計算機的cpu型號 |
| securityPolicy |
瀏覽器支援的加密型別 |
可以使用navigator.userAgent屬性來判斷瀏覽器型別。
var browserName = window.navigator.userAgent.toLowerCase();
if(/mobi/i.test(browserName)){
// 手機瀏覽器
if(/android/i.test(browserName)){
alert("安卓");
} else if (/iphone/i.test(browserName)){
alert("iPhone");
}
} else {
//非手機瀏覽器
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
//只能識別到IE10及以下。
alert("IE");
}else if(/edge/i.test(browserName)){
alert('Edge')
}else if(/firefox/i.test(browserName)){
alert("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
alert("Chrome");
}else if(/opera/i.test(browserName)){
alert("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
alert("Safari");
}else{
alert("unKnow");
}
}但是使用者可以改變這個字串。這個字串的格式並無統一規定，也無法保證未來的適用性，各種上網裝置層出不窮，難以窮盡。已經基本不使用了。
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}可以使用上面的函式來判斷IE瀏覽器了。
1.3 screen物件
包含了使用者顯示器螢幕相關資訊。通過該物件，可以訪問使用者顯示器螢幕寬、高、色深等資訊
| 屬性 |
描述 |
| width |
螢幕的寬度 |
| height |
螢幕的高度 |
| availWidth |
視窗可以使用的螢幕的寬度 |
| availHeight |
視窗可以使用的螢幕的高度 |
| pixelDepth |
視窗可以使用的螢幕的高度 |
2、window物件的方法
| 方法 |
功能 |
| alert(text) |
建立一個警告對話方塊，顯示一條資訊 |
| blur() |
將焦點從視窗移除 |
| close() |
關閉視窗 |
| confirm() |
建立一個需要使用者確認的對話方塊 |
| focus() |
將焦點移至視窗 |
| open(url,name,[options]) |
開啟一個新視窗並返回新window 物件 |
| prompt(text,input) |
建立一個對話方塊要求使用者輸入資訊 |
| scroll(x,y) |
在視窗中滾動到一個畫素點的位置 |
| moveBy(x,y) |
按照給定畫素引數移動指定視窗,x,y代表水平位移量和垂直位移量 |
| moveTo(x,y) |
將視窗移動到指定的指定座標(x,y)處 |
| resizeBy(x,y) |
將當前視窗改變指定的大小(x,y)，當x、y的值大於0時為擴大，小於0時為縮小 |
| resizeTo(x,y) |
將當前視窗改變大小，x、y分別為寬度和高度 |
| find() |
調出查詢對話方塊 |
| setInterval(func,time) |
經過指定時間間執行程式碼 |
| clearInterval("id") |
取消setInterval |
| setTimeout(func,time) |
在定時器超過後執行程式碼 |
| clearTimeout("id") |
取消還未執行的setTimeout |
| print() |
調出列印對話方塊 |
下面詳細介紹幾個常用的
2.1 window.alert()
常用的提示資訊，不可以寫css樣式，可以使用'/n'換行。主要用於除錯，現在基本都是使用console。作為使用者提示，很不友好。
2.2 window.prompt('提示','值')
輸入提示框 返回有三種，確定填寫=>值，確定但不填寫=>''，取消/關閉=>null
2.3 window.confirm('你確定退出嗎？')
提示使用者資訊，確定=> true , 取消=> false
2.4 window.open(url,'name','type','string')
以type的方式開啟名為name的string形式的url網頁。
| blank |
在一個新的未命名的視窗載入文件 |
| _self |
在相同的框架或視窗中載入目標文件 |
| _parent |
把文件載入父視窗或包含了超連結引用的框架的框架集 |
| _top |
把文件載入包含該超連結的視窗,取代任何當前正在視窗中顯示的框架 |
2.5 setTimeout和setInterval
setTimeout(fn,x) x毫秒之後執行 => clearTimeout() 取消
setInterval(fn,x) 每隔x毫秒執行一次 => clearInterval() 取消
function nowTime() {
console.log("this is nowTime");
}
setTimeout(nowTime, 2000);
clearTimeout(nowTime);
function nowTime1() {
console.log("this is nowTime1");
}
setInterval(nowTime1, 2000);
clearInterval(nowTime1);2.6 window.resizeTo()，window.resizeBy()
都是用於縮小視窗大小，
window.resizeTo(window.screen.availWidth/2,window.screen.availHeight/2) 縮小到 多少
window.resizeBy(-200,-200) 縮小了 多少
<button onclick="openOne()">開啟</button>
<button onclick="resize()">縮放</button>
var w;
function openOne(){
//有個很奇怪的問題，如果不寫url地址，那就可以被成功縮放，但是寫了就不行。很奇怪，求解惑
w=window.open('http://www.baidu.com','', 'width=100,height=100');
w.focus();
}
function resize () {
w.resizeBy(500,500);
w.focus();
}2.7 window.scrollTo()，window.scrollBy()
window.scrollTo(x,y)：用於將文件滾動到指定位置。它接受兩個引數，表示滾動後位於視窗左上角的頁面座標。滾動到
window.scrollBy(0,window.innerHeight)：用於將網頁滾動指定距離（單位畫素）。它接受兩個引數：水平向右滾動的畫素，垂直向下滾動的畫素。滾動了
2.8 window.moveTo()，window.moveBy()
window.moveTo() 移動瀏覽器視窗到指定位置,接受兩個引數，分別是視窗左上角距離螢幕左上角的水平距離和垂直距離，單位為畫素。 移動到
window.moveBy() 將視窗移動到一個相對位置。它接受兩個引數，分佈是視窗左上角向右移動的水平距離和向下移動的垂直距離，單位為畫素。移動了
2.9 window.focus()，window.blur()
window.focus() 會啟用視窗，使其獲得焦點，出現在其他視窗的前面
window.blur() 將焦點從視窗移除
over~
拓展：
關注我獲取更多前端資源和經驗分享
關注後回覆 vivi 獲取我的微訊號，望不吝賜教，pps：可輕撩哈哈
感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~