17 js12 BOM
1、BOM：瀏覽器物件模型(Browser object model),主要處理瀏覽器視窗和框架，封裝了一系列與瀏覽器互動的方法和介面；js通過BOM來訪問、控制、修改瀏覽器(準確的說是瀏覽器視窗);
DOM：封裝系列方法操作html和xml,BOM封裝系列方法來操作瀏覽器，準確的說是操作瀏覽器視窗，window表示的便是瀏覽器視窗(iframe框架引入的頁面也是視窗)，所以玩轉BOM就是玩轉window物件,window物件下有很多屬性和方法；[如果聚焦到屬性，這些屬性也都是物件，也有自己的屬性和方法]
視窗：瀏覽器網頁視窗以及iframe引入的都稱之為視窗，iframe框架引入的網頁有完整的文件結構，等同於是新的網頁(html,head,body都有)；而可視區視窗指的是html文件內容呈現出的部分；
window物件的兩層含義：(1).其表示瀏覽器視窗或框架；(2).window就是全域性物件，window物件的屬性便是全域性變數，例如：window.document ------>>> document即可(window可省略)；
------>>>>>>
2、window物件的屬性和方法：window物件的屬性便是一系列功能的集合，包含：window物件/Navigator/History/Location/Screen等；
(1).document: window物件的屬性包含了document屬性，因此通過window物件的document屬性就可以訪問、檢索、修改文件內容與結構，document物件又是dom樹的根節點；
(2).屬性和方法：
[1].window.innerWidth/Height; // 可視區寬/高：包含滾動條；clientWidth;/clientHeight;//ie9以下的屬性，還有些小區別，其表示的可視區寬/高不包含滾動條； [2].pageXOffset;/pageYOffsset;可設定但不可操控(滾動條不會到達指定位置)；應用場景：圖片的懶載入(大型購物網站為了使用者體驗需要保證響應迅速，往往先把首屏內容展示給使用者，剩下的內容按需載入即可；也許使用者壓根不看首屏直接搜尋，避免把所有內容都載入好佔用頻寬，浪費流量)；[3].window.screenX/Y;//chrome,firefox支援；window.screenLeft/top;//ie opera支援，表示的是視窗左上角在螢幕中的x/y座標，只讀,得到數字； screen = screenX/Y || screenLeft/top; [4].window.top/length/parent/self;涉及到引入iframe框架後的操作，父子域，同源策略等(iframe引入的是完整的文件結構，有自己的window)；top:巢狀父子頁面中表示最頂層；self是拿到自身；所以平時變數宣告中不要宣告var top/parent/name/self等，避免衝突； [5].window.name:視窗的名字，可讀/可寫，其與頁面內容無關，只是給視窗取名字而已；
[6].setInterval();/setTimeout();/clearInterval();/clearTimeout();/scroll();scrollTo();/scrollBy();[7].open();/close();//window.open();//方法返回值為新視窗的window；close();//關閉新開啟的視窗，(不同瀏覽器相容性有差異，一些瀏覽器可以關閉任何視窗)
[8].window系列彈窗是原生的UI部分,由於太粗糙，日常開發中都不用原生window的彈窗；alert();有阻塞當前頁面的作用；
window.alert("hello"+\n+"world");//報錯；window.alert("hello+\n+world");//hello+ 換行 +world; window.alert("hello"+"\n"+"world");// 帶有折行的對話方塊
------->>>>>window物件有很多屬性，單獨就屬性來探討，其是物件有獨立的屬性和方法；
(3).navigator物件：瀏覽器客戶端的資訊(引用的Navigator物件，其是建構函式，系統用來構造,不允許自定義) [平時談到的Navigator物件有些不嚴格]
navigator.appversion;/ navigator.userAgent,第二個更加全面一些，包含瀏覽器的資訊；應用場景：開發中為了相容不同的瀏覽器往往需要開發多個版本的同一網頁，然後將其部署到伺服器中，當用戶通過瀏覽器發出網路請求的過程中，實際會將所使用的瀏覽器資訊也就是navigator.userAgent上的資訊，和http:協議一起傳送給伺服器(當作報文)，然後伺服器根據瀏覽器的資訊返回相應的網頁；上述為後臺應用場景，瀏覽器端也有很多應用場景，例如通過其來判斷所處的平臺是瀏覽器端還是移動端，提取有效資料；
navigator.cookieEnabled//返回是否啟用cookie的布林值；(cookie就是個檔案，裡面儲存的使用者名稱/密碼，後端有相應的時間機制，若是幾小時內登入便不需要再次輸入使用者名稱和密碼)
navigator.onLine//返回系統是否離線(沒聯網)的布林值;(應用場景：若是沒有離線，則進行網路請求最新的網頁內容，若是離線，則返回快取的網頁內容，其也是離線快取的依據)
(4).history物件：瀏覽器視窗中訪問過的URL;(html5對其進行了很多補充)
history.length;//訪問過的URL數量；history.back();//後退；history.forward();//前一個；history.go();//引數為數字(正負皆可)，載入到某個具體的頁面；[back();和go();無引數,目前瀏覽器也支援填入引數載入到某頁面，前進後退按鈕底層呼叫的便是該方法]
(5).location物件：當前URL的資訊；屬性都是可讀可寫；
https://www.baidu.com/s?wd=URL&rsv_spt=1&rsv_iqid=0xd61dd2b20002cb56#dd url:統一資源定位器；協議名；域名(www:baidu.com:443),埠號可省略，https:443,http:80; 主機名：實體地址； /s: 路徑； ?以及後面的&,=都是引數(經過編碼後的引數); #:錨點；
location.href;//返回完整的URL；location.hash;//返回從#開始的值；location.host;//返回主機名和當前URL的埠號；location.hostname;//返回主機名；location.pathname;//URL中的路徑部分；location.port;//返回埠號；location.protocol;//返回協議名；location.search;//從?開始的URL部分，查詢；
location.assign();//載入新文件；location.reload();//重新載入文件，引數選填，若是不填或者是填false則取消瀏覽器快取的文件；location.replace();//用新文件替換當前文件(沒有歷史記錄，很少用到)
可讀可寫
補充：操作過程中頁面跳轉或重新整理，若只是修改錨點頁面並不會重新整理(特性現象)，URL任何部分的修改整個位址列便產生了變化，由於錨點的特性，如今開發更傾向於使用者體驗感更好的單頁面應用(vue框架)，錨點的改變代表著路由的變化；(錨點最原生的應用是：點選固定的側邊欄跳轉到相應的位置，如今單頁面應用屬於錨點的高階應用)
(6).screen物件：客戶端顯示螢幕的資訊；js可以利用這些資訊來優化它們的輸出，以達到使用者的顯示要求，一個程式可以根據顯示器的尺寸來選擇使用大影象還是使用小影象，它還可以根據顯示器的顏色深度選擇使用16位色還是使用8位色的圖形；js程式還可以根據螢幕尺寸的資訊將新的瀏覽器視窗定位在螢幕中間；[根據螢幕資訊作出相應的改變]
screen.width/height;//返回顯示器螢幕的寬/高；包含工作列；
screen.availWidth/availHeight;//返回顯示器螢幕的寬/高；(除去window的工作列)
【注：使用物件就是小寫的形式，大寫的即為建構函式的函式名，要加以區分，window/Window】