什么是BOM
DOM是一套操作HTML標(biāo)簽的API（接口/方法/屬性）
BOM是一套操作瀏覽器的API（接口/方法/屬性）
常見(jiàn)的BOM對(duì)象
window：代表整個(gè)瀏覽器窗口（window是BOM中的一個(gè)對(duì)象妓蛮，并且是頂級(jí)的對(duì)象）
Navigator ：代表瀏覽器當(dāng)前的信息府喳，通過(guò)Navigator我們可以獲取用戶當(dāng)前使用的是什么瀏覽器
Location： 代表瀏覽器當(dāng)前的地址信息，通過(guò)Location我們可以獲取或者設(shè)置當(dāng)前的地址信息
History：代表瀏覽器的歷史信息袱吆，通過(guò)History我們可以實(shí)現(xiàn)上一步/刷新/下一步操作（出于
對(duì)用戶的隱私考慮，我們只能拿到當(dāng)前的瀏覽記錄距淫，不能拿到所有的歷史記錄）
Screen：代表用戶的屏幕信息
Navigator（獲取用戶當(dāng)前瀏覽器信息）
let agent = window.navigator.userAgent;
if(/chrome/i.test(agent)){
alert("谷歌");
}else if(/firefox/i.test(agent)){
alert("火狐");
}else if(/msie/i.test(agent)){
alert("低級(jí)IE瀏覽器");
}else if("ActiveXObject" in window){
alert("低級(jí)IE瀏覽器");
}
Location
window.location.href; //獲取當(dāng)前地址欄的地址
window.location.href = “http://www.baidu.com”; // 設(shè)置當(dāng)前地址欄的地址
window.location.reload(); //刷新
window.location.reload(true); //強(qiáng)制刷新
History
可以通過(guò)History來(lái)實(shí)現(xiàn)刷新绞绒、上一步、下一步
window.history.forword(); //上一步
window.history.back(); //下一步
window.history.go(0); //接收參數(shù) 0 表示刷新當(dāng)前頁(yè)面
window.history.go(2); //接收正整數(shù) 表示前進(jìn)2個(gè)頁(yè)面
window.history.go(-2); //接收負(fù)整數(shù) 表示后退2個(gè)頁(yè)面
##獲取元素寬高的方法
1. getComputedStyle();
獲取的寬高不包括邊框和內(nèi)邊距
既可以獲取行內(nèi)寬高榕暇，也可以獲取CSS設(shè)置的寬高
只能獲取处铛，不能設(shè)置
只支持IE9以上的瀏覽器
```JavaScript
let oDiv = document.querySelector("div");
let oStyle = getComputedStyle(oDiv);
console.log(oStyle.height);//獲取高
console.log(oStyle.width);//獲取寬
- 通過(guò)currentStyle獲取
獲取的寬高不包括邊框和內(nèi)邊距
既可以獲取行內(nèi)寬高，也可以獲取CSS設(shè)置的寬高
只能獲取拐揭，不能設(shè)置
只支持IE9以下的瀏覽器
let oDiv = document.querySelector("div");
let oStyle = oDiv.currentStyle;
console.log(oStyle.height);//獲取高
console.log(oStyle.width);//獲取寬
- 通過(guò)style獲取
獲取的寬高不包括邊框和內(nèi)邊距
可以獲取行內(nèi)寬高撤蟆，但不可以獲取CSS設(shè)置的寬高
可以獲取，也可以設(shè)置
高級(jí)低級(jí)瀏覽器都支持
let oDiv = document.querySelector("div");
console.log(oDiv.style.height);//獲取高
console.log(oDiv.style.width);//獲取寬
- offsetWidth 和 offsetHeight
獲取的寬高包含 邊框 + 內(nèi)邊距 + 元素寬高
即可以獲取行內(nèi)設(shè)置的寬高也可以獲取CSS設(shè)置的寬高
只支持獲取, 不支持設(shè)置
高級(jí)低級(jí)瀏覽器都支持
let oDiv = document.querySelector("div");
console.log(oDiv.offsetWidth );//獲取寬
console.log(oDiv.offsetHeight);//獲取高
總結(jié)
- 通過(guò) offsetWidth 和 offsetHeight 獲取的寬高包含 邊框 + 內(nèi)邊距 + 元素寬高
通過(guò)getComputedStyle(); / currentStyle / style 獲取的寬高不包括邊框和內(nèi)邊距 - 通過(guò) offsetWidth 和 offsetHeight / getComputedStyle(); / currentStyle 既可以獲取行內(nèi)寬高堂污，也可以獲取CSS設(shè)置的寬高
通過(guò)style 可以獲取行內(nèi)寬高家肯，但不可以獲取CSS設(shè)置的寬高 - 高級(jí)瀏覽器 getComputedStyle(); 低級(jí)瀏覽器 通過(guò)currentStyle獲取 高低級(jí)都支持：通過(guò)style獲取 / offsetWidth 和 offsetHeight
- style可以獲取也可以設(shè)置 其他的只能獲取
- style只能獲取行內(nèi)樣式， 別的可以獲取行內(nèi)和外鏈內(nèi)聯(lián)樣式
三大家族
- offset家族
offsetWidth / offsetHeight ： 獲取的寬高包含 邊框 + 內(nèi)邊距 + 元素寬高
offsetParent ： 獲取元素的第一個(gè)定位祖先元素 盟猖，如果沒(méi)有定位的則獲取到的是body
offsetLeft /offsetTop ：獲取元素到第一個(gè)定位元素的偏移量讨衣，如果沒(méi)有定位的則獲取到的是到body的偏移量 - client家族
clientWidth / clientHeight ： 獲取的寬高包含內(nèi)邊距 + 元素寬高
clientLeft /clientHeight ： 獲取 元素的 左邊框 或者 頂部邊框 - scroll家族
scrollWidth / scrollHeight ：當(dāng)內(nèi)容沒(méi)超出元素范圍時(shí) 獲取的是 內(nèi)邊框 + 元素寬高
當(dāng)內(nèi)容超出元素范圍時(shí) 獲取的是 內(nèi)邊框 + 元素寬高+超出的寬度
scrollTop / scrollLeft ：Top獲取的是內(nèi)容超出頂部?jī)?nèi)邊距的距離 Left獲取的是內(nèi)容超出左邊內(nèi)邊距的距離
獲取網(wǎng)頁(yè)寬高
let {width, height} = getScreen(); //解構(gòu)拿到寬高
console.log(width); //打印網(wǎng)頁(yè)寬高
console.log(height);
function getScreen() {//獲取網(wǎng)頁(yè)寬高的兼容性方法
let width, height;
if(window.innerWidth){
width = window.innerWidth;
height = window.innerHeight;
}else if(document.compatMode === "BackCompat"){
width = document.body.clientWidth;
height = document.body.clientHeight;
}else{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
}
}
innerWidth/innerHeight只能在IE9以及IE9以上的瀏覽器中才能獲取
documentElement.clientWidth/documentElement.clientHeight可以用于在IE9以下的瀏覽器的標(biāo)準(zhǔn)模式中獲取
在混雜模式中利用document.body.clientWidth/document.body.clientHeight獲取可視區(qū)域的寬高
獲取網(wǎng)頁(yè)滾動(dòng)距離
let {x, y} = getPageScroll();
function getPageScroll() {
let x, y;
if(window.pageXOffset){
x = window.pageXOffset;
y = window.pageYOffset;
}else if(document.compatMode === "BackCompat"){
x = document.body.scrollLeft;
y = document.body.scrollTop;
}else{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return {
x: x,
y: y
}
}
window.pageXOffset;用于IE9及以上獲取
document.body.scrollLeft;用于IE9以下的混雜模式獲取
document.documentElement.scrollLeft;用于IE9以下的標(biāo)準(zhǔn)模式獲取
監(jiān)聽(tīng)網(wǎng)頁(yè)可視區(qū)域的變化
window.onresize = function () {
resetSize();
console.log("尺寸的變化");
}
