BOM小操做

BOM操做

javascript 技術下包含：ecmascript , dom , bom . 如今來了解一下dom操做

• BOM 的意思就是瀏覽器對象模型，全稱爲：Brower Object Model , 其下有四個屬性：

  • window
  • navigator
  • location
  • screen
  • history
  • document

windows

咱們在控制檯打印 console.log(windows) ，控制檯會輸出不少屬性，事實上，navigator ， location ， screen ， history ， document 這幾個屬性也是 window 下的屬性。

來看看幾個小例子：

btn.onclick=function(){
    window.open("https://www.baidu.com")
}

在上面的代碼中，點擊按鈕，會在瀏覽器的新窗口內打開百度的首頁。

btn.onclick=function(){
    window.open("https://www.baidu.com","_self")
}

如上，點擊按鈕以後，會在當前瀏覽器窗口打開百度首頁。

window.open()的默認屬性爲 _blank ，即在新窗口打開新頁面。
window.close()是用來關閉又程序打開的新窗口，直接在地址欄輸入地址打開的頁面不適用。

系統對話框

系統對話框有以下三種類型：

• alert 彈出框
• confirm 確認對話框
• prompt 提醒對話框，含有一個輸入框

alert

confirm

promit

• 輸入框內也能夠設置默認顯示的文字，只須要寫兩個參數就好了。

Navigator 對象包含有關瀏覽器的信息

Navigator 屬性

appCodeName  返回瀏覽器的代碼名
appMinorVersion  返回瀏覽器的次級版本
appName  返回瀏覽器的名稱
appVersion  返回瀏覽器的平臺和版本信息
browserLanguage  返回當前瀏覽器的語言
cookieEnabled  返回知名瀏覽器中是否啓用cookie的布爾值
cpuClass  返回瀏覽器系統的CPU等級
onLine : 返回致命系統是否處於脫機模式的布爾值
platform  返回運行瀏覽器的操做系統平臺
userAgent  返回瀏覽器版本等信息

loaction 包含有關當前ulr的信息

loaction 屬性

hash  設置返回哈希值，以(#)開頭的字符
host  設置或返回主機名和當前url的端口號
hostname  設置或返回當前ulr的主機名
href  設置或返回完整的url
pathname  設置或返回當前url的路徑部分
port  設置或返回當前url的端口號
protocol  設置或返回當前的url的協議
search  設置或返回從(?)開始的url

location 方法

assign()  加載新的文檔
reload()  從新加載當前文檔
replace()  用新的文檔替換當前文檔

screen 對象包含有關客戶端顯示屏幕的信息

screen 屬性

availHeight  返回顯示屏幕的高度 (除 Windows 任務欄以外)
availWidth  返回顯示屏幕的寬度 (除 Windows 任務欄以外)
bufferDepth  設置或返回調色板的比特深度。
colorDepth  返回目標設備或緩衝器上的調色板的比特深度
deviceXDPI  返回顯示屏幕的每英寸水平點數
deviceYDPI  返回顯示屏幕的每英寸垂直點數。
fontSmoothingEnabled : 返回用戶是否在顯示控制面板中啓用了字體平滑
height : 返回顯示屏幕的高度。
logicalXDPI  返回顯示屏幕每英寸的水平方向的常規點數
logicalYDPI  返回顯示屏幕每英寸的垂直方向的常規點數。
pixelDepth    返回顯示屏幕的顏色分辨率（比特每像素）。
updateInterval    設置或返回屏幕的刷新率。
width    返回顯示器屏幕的寬度。

history 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

history 屬性

length  返回瀏覽器歷史列表中的 URL 數量。

history 方法

back()  加載 history 列表中的前一個 URL。
forward()  加載 history 列表中的下一個 URL。
go()  加載 history 列表中的某個具體頁面。

下面這段代碼也能執行後退操做

history.go(-2)//執行兩次後退

若是給定正值，則爲前進

document 文檔

btn.onclick=function(){
    var a = window.open('');
    a.document.write("hello world")
}

在如上代碼中，點擊按鈕能夠在新的窗口顯示hello world。