JavaScript BOM

什么是BOM

DOM是一套操作HTML标签的API（接口/方法/属性）
BOM是一套操作浏览器的API（接口/方法/属性）

常见的BOM对象
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Screen：代表用户的屏幕信息

Navigator（获取用户当前浏览器信息）

 

 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("低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("低级IE浏览器");
    }

Location

 

window.location.href;  //获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; // 设置当前地址栏的地址
window.location.reload();  //刷新
window.location.reload(true);  //强制刷新

History

可以通过History来实现刷新、上一步、下一步

 

window.history.forword(); //上一步
 window.history.back();  //下一步
 window.history.go(0);  //接收参数 0   表示刷新当前页面
 window.history.go(2); //接收正整数  表示前进2个页面
 window.history.go(-2); //接收负整数  表示后退2个页面
##获取元素宽高的方法
1. getComputedStyle();
获取的宽高不包括边框和内边距
既可以获取行内宽高，也可以获取CSS设置的宽高
只能获取，不能设置
只支持IE9以上的浏览器
```JavaScript
let oDiv = document.querySelector("div");
let oStyle = getComputedStyle(oDiv);
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

1. 通过currentStyle获取
   获取的宽高不包括边框和内边距
   既可以获取行内宽高，也可以获取CSS设置的宽高
   只能获取，不能设置
   只支持IE9以下的浏览器

 

let oDiv = document.querySelector("div");
let oStyle = oDiv.currentStyle;
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

1. 通过style获取
   获取的宽高不包括边框和内边距
   可以获取行内宽高，但不可以获取CSS设置的宽高
   可以获取，也可以设置
   高级低级浏览器都支持

 

let oDiv = document.querySelector("div");
console.log(oDiv.style.height);//获取高
console.log(oDiv.style.width);//获取宽

1. offsetWidth 和 offsetHeight
   获取的宽高包含 边框 + 内边距 + 元素宽高
   即可以获取行内设置的宽高也可以获取CSS设置的宽高
   只支持获取, 不支持设置
   高级低级浏览器都支持

 

let oDiv = document.querySelector("div");
console.log(oDiv.offsetWidth );//获取宽
console.log(oDiv.offsetHeight);//获取高

总结

1. 通过 offsetWidth 和 offsetHeight 获取的宽高包含 边框 + 内边距 + 元素宽高
   通过getComputedStyle(); / currentStyle / style 获取的宽高不包括边框和内边距
2. 通过 offsetWidth 和 offsetHeight / getComputedStyle(); / currentStyle 既可以获取行内宽高，也可以获取CSS设置的宽高
   通过style 可以获取行内宽高，但不可以获取CSS设置的宽高
3. 高级浏览器 getComputedStyle(); 低级浏览器 通过currentStyle获取 高低级都支持：通过style获取 / offsetWidth 和 offsetHeight
4. style可以获取也可以设置 其他的只能获取
5. style只能获取行内样式， 别的可以获取行内和外链内联样式

三大家族

• offset家族
  offsetWidth / offsetHeight ： 获取的宽高包含 边框 + 内边距 + 元素宽高
  offsetParent ： 获取元素的第一个定位祖先元素 ，如果没有定位的则获取到的是body
  offsetLeft /offsetTop ：获取元素到第一个定位元素的偏移量，如果没有定位的则获取到的是到body的偏移量
• client家族
  clientWidth / clientHeight ： 获取的宽高包含内边距 + 元素宽高
  clientLeft /clientHeight ： 获取 元素的 左边框 或者 顶部边框
• scroll家族
  scrollWidth / scrollHeight ：当内容没超出元素范围时 获取的是 内边框 + 元素宽高
  当内容超出元素范围时 获取的是 内边框 + 元素宽高+超出的宽度
  scrollTop / scrollLeft ：Top获取的是内容超出顶部内边距的距离 Left获取的是内容超出左边内边距的距离

获取网页宽高

 

let {width, height} = getScreen(); //解构拿到宽高
    console.log(width);  //打印网页宽高
    console.log(height);

    function getScreen() {//获取网页宽高的兼容性方法
        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以下的浏览器的标准模式中获取
在混杂模式中利用document.body.clientWidth/document.body.clientHeight获取可视区域的宽高

获取网页滚动距离

 

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以下的标准模式获取

监听网页可视区域的变化

 

window.onresize = function () {
        resetSize();
        console.log("尺寸的变化");
    }