15-JavaScript-BOM开篇

BOM

• 什么是BOM?
  DOM就是一套操作HTML标签的API(接口/方法/属性)
  BOM就是一套操作浏览器的API(接口/方法/属性)

BOM中常见的对象

window对象

• 代表整个浏览器窗口

注意点: window是BOM中的一个对象, 并且是一个顶级的对象(全局)

Navigator对象

• 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器

console.log(window.navigator);
console.log(window.navigator.userAgent);

Location对象

• 代表浏览器地址栏的信息

// console.log(window.location);
//获取当前地址栏地址
console.log(window.location.href);

// 设置当前地址栏的地址
window.location.href = "http://www.it666.com";
 window.location = "http://www.it666.com";//相当于跳转到指定地址

//重新加载界面
window.location.reload();
// 如果传递一个true, 会强制清空缓冲
window.location.reload(true);

History对象

• 代表浏览器的历史信息, 可以通过History来实现刷新/上一步/下一步

// history对象的forward就可以前进
// 注意点: 只有当前访问过其它的界面, 才能通过forward方法前进
// 注意点: 只有当前是从其它界面跳转过来的, 才能通过back方法后退
window.history.forward();
window.history.back();

// history对象的go方法, 也可以实现前进和后退
// 如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
// 如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
// 如果给go方法传递0, 就代表刷新
window.history.go(1);
window.history.go(0);
console.log("abc");

Screen对象

• 代表用户的屏幕信息

offsetWidth和offsetHeight

• 作用:获取元素占用空间的大小,占用空间 = width + border + paddding
• offsetXXXX和style.XXXX的区别:
  • offsetXXXX既可以获取行内, 也可以获取CSS样式
  • style.XXXX只能获取行内, 不能获取CSS样式
  • offsetXXXX获取到的宽度和高度, 是元素占用的宽度和高度
  • style.XXXX获取到的宽度和高度, 是元素width和height属性的宽度和高度,也就是不包含border + paddding

console.log(oDiv.style.width);//获取不到CSS样式设置的宽高
console.log(oDiv.offsetWidth);//width + border + paddding

window.getComputedStyle方法

• 该方法的作用:
  是获取当前元素对应的CSS样式
• 第一个参数: 需要获取样式的元素
  第二个参数: null
  返回一个保存了指定元素所有CSS样式的对象给我们

注意点: getComputedStyle只能用于IE9及以上

var style = window.getComputedStyle(oDiv,null);
console.dir(style.width);//100px 字符串
console.dir(style.height);//100px 字符串

// 获取样式兼容性的处理
    function getStyle(obj, attr) {
        //兼容低版本浏览器
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj, null)[attr];
        }
    }

offsetLeft和offsetTop

• 作用:获取元素到第一个定位元素之间的偏移位,如果没有父元素是定位的, 那么就是获取到body的偏移位
• offsetLeft和marginLeft和left的区别
  • offsetLeft:获取的是距离第一个定位元素或者body的偏移位
  • marginLeft: 获取的是CSS设置的marginLeft的值
  • left: 获取的是CSS设置的left的值

注意点:
1.offsetXXX返回的是数值类型, 而style.XXXX返回的都是字符串
2.offsetXXX是只读的, style.XXXX是可读可写的

console.log(oDiv.offsetLeft);
console.log(oDiv.offsetTop);
console.log(oDiv.style.marginLeft);//空的,不能获取CSS样式设置的值

clientWidth和clientHeight

• clientWidth = width + padding

注意点:
clientWidth的宽度是不包括元素的边框宽度

• clientLeft = border-left

scrollHeight和scrollTop

• scrollHeight:
  如果内容没有超过元素的范围, 那么就是元素的padding + height
  如果内容超出了元素的范围, 那么就是padding + height + 超出的高度
• scrollTop:
  获取被移出元素范围的距离(参考点不包括border)

pageX和pageY

• pageX和pageY是相对于整个文档的水平和垂直距离(只读属性)

注意点:
如果网页出现滚动条,那么滚出可视区域的部分也算入在内

网页可视区域大小

• 高级版本浏览器

// 注意点:存在兼容问题支持IE9+
console.log(window.innerWidth);
console.log(window.innerHeight);

• 低级版本IE浏览器

//兼容IE8-方法
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

• 获取网页可视区域大小兼容写法

    //简单兼容性处理
    function getScreen() {
        if (window.innerWidth){
            return {
                width: window.innerWidth,
                height : window.innerHeight
            }
        } else {
            return{
                width: document.documentElement.clientWidth,
                height : document.documentElement.clientHeight
            }
        }
    }

获取网页滚动距离

• 老版本的谷歌

document.body.scrollTop

• 老版本的其它浏览器

document.documentElement.scrollTop

• 新版本的浏览器

window.pageYOffset

• 兼容写法

function getPageScroll() {
        var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
        return {
            top: top,
            left: left
        }
    }