什么是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);//获取宽
- 通过currentStyle获取
获取的宽高不包括边框和内边距
既可以获取行内宽高，也可以获取CSS设置的宽高
只能获取，不能设置
只支持IE9以下的浏览器
let oDiv = document.querySelector("div");
let oStyle = oDiv.currentStyle;
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽
- 通过style获取
获取的宽高不包括边框和内边距
可以获取行内宽高，但不可以获取CSS设置的宽高
可以获取，也可以设置
高级低级浏览器都支持
let oDiv = document.querySelector("div");
console.log(oDiv.style.height);//获取高
console.log(oDiv.style.width);//获取宽
- offsetWidth 和 offsetHeight
获取的宽高包含 边框 + 内边距 + 元素宽高
即可以获取行内设置的宽高也可以获取CSS设置的宽高
只支持获取, 不支持设置
高级低级浏览器都支持
let oDiv = document.querySelector("div");
console.log(oDiv.offsetWidth );//获取宽
console.log(oDiv.offsetHeight);//获取高
总结
- 通过 offsetWidth 和 offsetHeight 获取的宽高包含 边框 + 内边距 + 元素宽高
通过getComputedStyle(); / currentStyle / style 获取的宽高不包括边框和内边距 - 通过 offsetWidth 和 offsetHeight / getComputedStyle(); / currentStyle 既可以获取行内宽高，也可以获取CSS设置的宽高
通过style 可以获取行内宽高，但不可以获取CSS设置的宽高 - 高级浏览器 getComputedStyle(); 低级浏览器 通过currentStyle获取 高低级都支持：通过style获取 / offsetWidth 和 offsetHeight
- style可以获取也可以设置 其他的只能获取
- 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("尺寸的变化");
}
网友评论