什么是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我們可以獲取用戶(hù)當(dāng)前使用的是什么瀏覽器
Location： 代表瀏覽器當(dāng)前的地址信息，通過(guò)Location我們可以獲取或者設(shè)置當(dāng)前的地址信息
History：代表瀏覽器的歷史信息，通過(guò)History我們可以實(shí)現(xiàn)上一步/刷新/下一步操作（出于
對(duì)用戶(hù)的隱私考慮，我們只能拿到當(dāng)前的瀏覽記錄，不能拿到所有的歷史記錄）
Screen：代表用戶(hù)的屏幕信息

Navigator（獲取用戶(hù)當(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);//獲取寬

2. 通過(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);//獲取寬

3. 通過(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);//獲取寬

4. 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é)

1. 通過(guò) offsetWidth 和 offsetHeight 獲取的寬高包含 邊框 + 內(nèi)邊距 + 元素寬高
   通過(guò)getComputedStyle(); / currentStyle / style 獲取的寬高不包括邊框和內(nèi)邊距
2. 通過(guò) offsetWidth 和 offsetHeight / getComputedStyle(); / currentStyle 既可以獲取行內(nèi)寬高，也可以獲取CSS設(shè)置的寬高
   通過(guò)style 可以獲取行內(nèi)寬高，但不可以獲取CSS設(shè)置的寬高
3. 高級(jí)瀏覽器 getComputedStyle(); 低級(jí)瀏覽器 通過(guò)currentStyle獲取 高低級(jí)都支持：通過(guò)style獲取 / offsetWidth 和 offsetHeight
4. style可以獲取也可以設(shè)置 其他的只能獲取
5. 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("尺寸的變化");
    }