10-JavaScript-BOM

什么是BOM

DOM就是一套操作HTML标签的API(接口/方法/属性)
BOM就是一套操作浏览器的API(接口/方法/属性)
BOM中常见的对象
- window:代表整个浏览器窗口,window是BOM中的一个对象,并且是一个顶级的对象(全局)
- Navigator:代表当前浏览器的信息,通过Navigator我们就能判断用户当前是什么浏览器
- Location:代表浏览器地址栏的信息,通过Location我们就能设置或者获取当前地址信息
- History代表浏览器的历史信息,通过History来实现刷新/上一步/下一步(处于隐私考虑,我们并不能拿到用户所有的历史记录,只能拿到当前的历史记录)
- Screen:代表用户的屏幕信息

Navigator

通过window.navigator.userAgent中的字符串查看当前的浏览器

判断浏览器

var 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.reload();
强制刷新页面:window.location.reload(true);

History

前进:window.history.forward();/window.history.go(正数);
后退:window.history.back();/window.history.go(负数);
刷新:window.history.go(0);

获取元素宽高其他方式

通过getComputedStyle获取宽高
- 获取的宽高不包括边框和内边距
- 既可以获取行内设置的宽高也可以获取CSS设置的宽高
- 只支持获取,不支持设置
- 只支持IE9及以上浏览器
通过currentStyle获取宽高
- 特点和getComputedStyle一样
- 但是一个支持高级浏览器一个支持低级浏览器
通过style属性获取宽高
- 获取的宽高不包括边框和内边距
- 只能获取行内设置的宽高,不能获取CSS设置的宽高
- 可以获取也可以设置
- 高级低级浏览器都支持
通过offsetWidth和offsetHeight
- 获取的宽高包括边框和内边距
- 既可以获取行内设置的宽高也可以获取CSS设置的宽高
- 只支持获取,不支持设置
- 低级高级浏览器都支持

获取元素位置的其他方式

offsetLeft和offsetTop
- 获取元素到第一个定位祖先元素之间的偏移位
- 如果没有祖先元素是定位的,那么就是获取到距离body的偏移位
offsetParent
- 获取元素的第一个定位祖先元素
- 如果没有祖先元素是定位的,那么就是获取到的就是body
clientLeft和clientTop
- 获取到的是左边框和顶部边框的宽度
clientWidth和clientHeight
- 获取到的是宽度/高度+内边距

scroll相关属性

内容没有超出元素范围时
- scrollWidth = 元素宽度 + 内边距宽度 = clientWidth
- scrollHeight = 元素高度 + 内边距高度 = clientHeight
内容超出元素范围时
- scrollWidth = 元素宽度 + 内边距宽度 + 超出宽度
- scrollHeight = 元素高度 + 内边距高度 + 超出高度
scrollTop:内容往上滚动,移出内边距顶部的部分
scrollLeft:内容水平滚动,移出内边距最左边的部分

获取网页宽高

innerWidth/innerHeight:只能在IE9及IE9以上的浏览器中才能获取
document.documentElement.clientWidth/document.documentElement.clientHeight:可以用于在IE9以下的浏览器的标准模式中获取
- 浏览器在渲染网页的时候有两种模式,"标准模式"和"怪异模式/混杂模式"
- 默认情况下都是以标准模式来进行渲染的
- 如果网页没有书写文档声明,那么就会按照"混杂模式/怪异模式"来进行渲染

document.body.clientWidth/document.body.clientHeight:用于在混杂模式中获取可视区域的宽高

//兼容
function getScreen(){
    let width,height;
    if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
    }else if(document.compatMode === "BackCompat"){
        width = document.body.clientWdith;
        height = document.body.clientHeight;
    }else{
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return{
        width:width,
        height:height
    }
}

获取网页滚动距离

IE9及以上浏览器:window.pageXOffset/window.pageYoffset
标准模式下浏览器:document.documentElement.scrollLeft/document.documentElement.scrollTop

混杂(怪异)模式下浏览器:document.body.scrollLeft/document.body.scrollTop

//兼容
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
    }
}

函数防抖与节流

函数防抖
- 是优化高频率执行js代码的一种手段
- 可以让被调用的函数在一次连续的高频操作过程中只被调用一次
- 减少代码执行次数,提升网页性能
- 应用场景:oninput/onmousemove/onscroll/onresize
```
let timerId = null;
元素.oninput = function(){
    timerId && clearInterval(timerId);
    timerId = setTimeout(function(){
        需要执行的代码;
    },1000);
}
```