一篇讓你明白什麼是浏覽器BOM方法的筆記

`BOM Browser Object Model 浏覽器對象模型`

虛拟機，任何語言編輯的程式都需要一個虛拟機來執行。如果脫離這個環境就無法運作。浏覽器就是一種虛拟機。用來解析html語言

同一款浏覽器，在不同系統中，屬性值是不同的

同一個系統，不同浏覽器，屬性都不同

BOM是有相容問題

BOM屬于樹型結構。 BOM的根就是Window

DOM的根是Document //DOM的根就是BOM的根下的一個屬性

BOM的主要方法：
1 Window.doucment // Document 文檔
2 Window.Location // 本地資訊 
3 Window.history // 曆史 浏覽器前進後退
4 Window.screen // 螢幕
5 Window.navigator // 浏覽器資訊

window的屬性方法

1. open() //彈窗，設定彈出的網頁位址，寬度高度等資訊。
 
2. close() //關閉浏覽器   
 
3. innerWidth 、innerHeight //浏覽器的寬度 包含滾動條寬度， 高度是文檔的高度
 
4. outerWidth 、outerHeight //如果全屏寬度一樣，如果不是全屏，則包含陰影寬度，
 //高度是整個浏覽器的高度。
 
5. screenLeft、 screenTop 
 screenX、 screenY //上下兩組屬性完全相同 浏覽器視窗距離螢幕左上角的距離， 隻讀資料，無法進行修改

location的屬性方法


1. location.reload(); //重載（重新整理）目前頁面
 
2. location.href="" //跳轉到特定網址  可以設定擷取網址資訊 産生曆史記錄
 
3. location.assign("")//跳轉頁面 無法擷取網址資訊 産生曆史記錄
 
4. location.replace("")//跳轉網頁 無法産生曆史記錄
　　 >點選按鈕跳轉頁面，
 　　>當伺服器傳回處理完的資料背景要求頁面跳轉 
 
5. location.hash  //擷取錨點名 網頁位址#和後面的内容
  
6. location.search //網址?和後面的内容
  
  ## http://127.0.0.1:5500/test4.html ##
  
7. location.hostname // 網頁域名 127.0.0.1
 
8. location.port //端口号 5500
 
9. location.pathname //域名端口号以外的内容 /test4.html
 
10. location.protoclo //擷取網頁協定  http：

history 方法

1. history.length //儲存浏覽器曆史記錄url數量 初始值為1 
 
2. history.go()  //接收一個參數，正數代表向前跳轉，負數代表向後跳轉
 
3. history.back() //向後跳轉 等同于history.go(-1);
4. history.forward() //向前跳轉，等同于history.go(1);
 
5. history.pushState() //向浏覽器曆史添加了一個狀态。pushState()方法帶有三個參數：一個狀态對象、一個标題(現在被忽略了)以及一個可選的URL位址 [ history.pushState(state, title, url); ]
 
6. history.replaceState() //方法的參數與pushState方法一模一樣，不同之處在于replaceState()方法會修改目前曆史記錄條目而并非建立新的條目

screen 屬性

1. screen.availWidth   //電腦螢幕的寬度
2. screen.availHeight //電腦螢幕的高度
3. screen.width      //電腦螢幕的寬度（ 去掉底下工作列 ）
4. screen.height    //電腦螢幕的高度（ 去掉底下工作列 ）

navigator 屬性

1. navigator.userAgent  //擷取浏覽器資訊 
 
2. navigator.appName  //傳回浏覽器的名稱
 
3. navigator.appVersion  //傳回浏覽器的平台和版本資訊
 
4. navigator.platform  //傳回運作浏覽器的作業系統平台