BOM的概述及方法

BOM的概述：

bom 稱為瀏覽器物件模型（bowser object model），也就意味他可以獲取瀏覽器上的所有內容以及相關的操作，BOM缺乏規范的，存在共有物件來解決這個問題，但是共有物件也存在兼容問題（ie10以后）

window

概述： window是頂層物件 屬于golbal物件，他是所有全域變數的父親，

相關方法

列印方法

// window //物件
console.log(window); //window 物件 Window的建構式
//常用的彈窗方法及列印方法
window.console.log('hello') //console.log() window可以省略的
console.log('日志') //控制臺  log日志 以日志的形式列印
console.error('錯誤') //以錯誤的形式列印
console.warn('警告') //以錯誤的形式列印
console.debug('測驗') //以錯誤的形式列印
console.info('資訊提示') //以錯誤的形式列印

彈窗方法

//彈窗
window.alert('hello') //彈提示窗
var isTrue = confirm('你確認要洗掉嗎') //互動框  true確認 false取消 回傳
console.log(isTrue);
var str = prompt('請輸入你的手機號') //輸入框 他會有個輸入框讓你輸入回傳對應的你輸入的內容 （string的內容）
console.log(str);

打開關閉方法

//打開 open 關閉 close
// 第一個引數是url地址 第二個引數為title target(打開方式 _blank _self _parent) 第三個引數為設定的引數（視窗的高度 寬度等等）
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
// 　height=100 窗??度；
// 　　width=400 窗?寬度；
// 　　top=0 窗?距離螢屏上?的象素值；
// 　　left=0 窗?距離螢屏左側的象素值；
// 　　toolbar=no 是否顯??具欄，yes為顯?；
// 　　menubar，scrollbars 表?選單欄和滾動欄，
// 　　resizable=no 是否允許改變窗???，yes為允許；
// 　　location=no 是否顯?地址欄，yes為允許；
// 　　status=no 是否顯?狀態欄內的資訊（通常是?件已經打開），yes為允許；
window.close() //關閉當前的視窗 （關閉瀏覽器只能有一個頁面）

改變位置的方法

//moveBy 一個是x軸的距離 y軸的距離
window.moveBy(100,100) //X+100 Y+100
//moveTo 一個x軸 一個y軸
window.moveTo(200,200) //X=200 Y=200

改變大小的方法

//改變對應的視窗大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo 
window.resizeTo(200,200) //width=200 height=200

列印方法

//print列印方法
window.print()

聚焦和失焦的方法

//focus 聚焦  blur 失去焦點
window.focus()
window.blur()

查找方法

//find查找 ctrl+f
window.find()

滾動欄位置改變

//滾動欄位置改變  初始位置 x:0,y:0
window.scrollBy(100,100) //原本的位置 x+100，y+100
window.scrollTo(500,500) //到達位置 x=500 y=500 //回到頂部

location物件 （非常重要）

屬性

console.log(location.hash) //哈希 #后面帶的值 *
console.log(location.host) //主機 域名 ip地址+埠號
console.log(location.hostname) //主機名 ip地址 （127.0.0.1表示本機地址和localhost是一樣的）
console.log(location.protocol) //協議 用于通信 （基于tcp/ip）http（明文傳輸） https（安全）（加密過）
console.log(location.port) //埠號  1--65525 （1-100的埠電腦占用了）http默認的埠80 https默認埠443
console.log(location.href) //鏈接的地址  也可以設定
console.log(location.search); //?后面帶的值 一般是get請求傳輸資料的時候 *
console.log(location.origin); //跨域
console.log(location.pathname); //路徑名 獲取的除了協議和ip地址加埠號后面的東西

方法

assign 跳轉頁面

location.assign('http://www.baidu.com')

replace 替換頁面

location.replace('http://www.weibo.com')

reload 重新加載頁面

location.reload()
//引數 boolean型別的值 true（從服務器加載 慢） false （從快取中加載 快）

history物件 （重點）

屬性

• length 歷史頁面個數
• state 狀態存盤的物件
• scrollRestoration 滾動欄恢復

方法

forwad 前進

function fn(){
    history.forward() //前進
}

back 后退

function fn1(){
    history.back() //后退
}

go 去任意的歷史頁面

function fn2(){
    history.go(-1) //去任意頁面 0就是自己 小于0 后退 大于0前進
}

pushState

//spa 單頁應用
function fn3(){
    //添加state的值 資料  ""  地址(會產生跨域問題)
    history.pushState('hello','','./index.html') //會改地址 但是不會重繪 推一個歷史頁面到歷史區 state設定進去
}

replaceState

function fn4(){
    //替換state
    history.replaceState('world','','/location物件講解.html') //會改地址 但是不會重繪 在歷史區直接修改當前這個歷史頁面 state設定進去
}

screen 物件

屬性

avaliHeight 可占用的最大高度

avaliWidth 可占用的最大寬度

avaliLeft 離螢屏左側的距離

avaliTop 離螢屏上方的距離

navigator物件

屬性

userAgent 用戶瀏覽器設定資訊

下面是BOM的一個思維導圖

標籤：其他

上一篇：day 07 物件及其定時器與日期

下一篇：V8中的快慢陣列（附原始碼、圖文更易理解😃）