又来学习BOM了，哈哈，Boooooom
一、BOM概述
BOM（Browser Object Model）即浏览器对象模型，是前端操作浏览器的核心，该对象提供了与浏览器交互相关对象结构。BOM由多个子对象组成，其核心为window对象，它是BOM的顶层对象。
二、window
表示在浏览器环境中的一个全局的顶级对象，所有在浏览器环境中使用的对象都是window对象的子对象。它有非常多的属性和方法。
1、window 对象的属性
| closed |
当窗口关闭时为真 |
| defaultStatus |
窗口底部状态栏显示的默认状态消息 |
| document |
窗口中当前显示的文档对象 |
| frames |
窗口中的框架对象数组 |
| history |
保存着窗口最近加载的URL |
| length |
窗口中的框架数 |
| location |
当前窗口的URL |
| name |
窗口名 |
| offscreenBuffering |
用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新 |
| opener |
打开当前窗口的窗口 |
| parent |
指向包含另一个窗口的窗口（由框架使用） |
| screen |
显示屏幕相关信息，如高度、宽度（以像素为单位） |
| self |
指示当前窗口 |
| status |
描述由用户交互导致的状态栏的临时消息 |
| top |
包含特定窗口的最顶层窗口（由框架使用） |
| window |
指示当前窗口，与self 等效 |
打开 F12 console即可验证
说一说窗口尺寸的获取
涉及不同浏览器的兼容性问题，在这里做一个总结。
窗口位置
IE、Safari、Opera 和Chrome 支持
screenLeft 窗口相对于屏幕左边的位置
screenTop 窗口相对于屏幕上边的位置
firefox 支持
screenX 窗口相对于屏幕左边的位置
screenY 窗口相对于屏幕上边的位置
兼容处理：
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;窗口大小
IE、Firefox、Safari、Opera 和Chrome 均支持
innerWidth和innerHeight，返回浏览器窗口本身的尺寸；
outerWidth 和outerHeight，返回浏览器窗口本身及边框的尺寸。
旧版IE：
document.documentElement.clientWidth document.documentElement.clientHeight
兼容怪异模式
document.body.clientWidth; //非标准模式使用body document.body.clientHeight;
终版兼容
function client() {
return {
clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
};
}其他：
window.pageYOffset（pageXOffset)：浏览器窗口顶部与文档顶部之间的距离（浏览器窗口与文档左侧之间的距离）也就是滚动条滚动的距离。
scroll系列 document.documentElement
| scrollHeight和scrollWidth |
对象内部的实际内容的高度/宽度（不包括border） |
| scrollTop和scrollLeft |
被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离 |
| onscroll事件 |
滚动条滚动触发的事件 |
| 页面滚动坐标 |
var scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0; |
offset系列 document.documentElement
| offsetWidth和offsetHeight |
offsetHeight的构成 |
offsetHeight = height + padding + border offsetWidth相同 |
| offsetHeight和style.height的区别 |
1. demo.style.height只能获取行内样式，否则无法获取到 2. .style.height是字符串（有单位px）， offsetHeight是数值（无单位） 3. .style.height可以设置行内样式，但offsetHeight是只读属性，不可设置 所以：demo.style.height获取 某元素的真实高度/宽度，用.style.height来设置高度/宽度 |
|
| offsetLeft和offsetTop |
offsetLeft的构成 |
1，到距离自身最近的（带有定位的）父元素的 左侧/顶部 2，如果所有父级元素都没有定位，则以body为准 3，offsetLeft是自身border左侧到父级padding左侧的距离 |
| offsetLeft和style.left的区别 |
1，style.left只能获取行内样式 2，offsetLeft只读，style.left可读可写 3，offsetLeft是数值，style.left是字符串并且有单位px 4，如果没有定位，style.left获取的数值可能是无效的 5，最大的区别：offsetLeft以border左上角为基准， style.left以margin左上角为基准 |
|
| offsetParent |
构成 |
1. 返回该对象距离最近的带有定位的父级元素 2. 如果当前元素的所有父级元素都没有定位（position为absolute或relative），那么offsetParent为body 3. offsetLeft获取的就是相对于offsetParent的距离 |
| 与parentNode的区别 |
parentNode始终指向的是当前元素的最近的父元素，无论定位与否 |
延伸：https://blog.csdn.net/csdnxcn/article/details/77886499
1.1 location对象
表示与当前加载的窗口相关的信息，包括url路径等。
| 属性 |
描述的URL内容 |
| host |
设置或返回主机名和当前 URL 的端口号。 |
| hostname |
设置或返回当前 URL 的主机名 |
| href |
设置或返回完整的 URL |
| pathname |
设置或返回当前 URL 的路径部分 |
| port |
设置或返回当前 URL 的端口号。默认情况下，大多数URL没有端口信息（默认为80端口）返回为空 |
| protocol |
设置或返回当前 URL 的协议,即双斜杠（//）之前的部分 |
| search |
设置或返回从问号 (?) 开始的 URL（查询部分）。 |
| hash |
设置或返回从井号 (#) 开始的 URL（锚）。 |
| origin |
协议名、主机名和端口号。 |
| 方法 |
功能 |
| assign() |
跳转到指定页面，与href等效 |
| reload() |
重载当前URL |
| repalce() |
用新的URL 替换当前页面,可以避免产生跳转前的历史记录，跳转后浏览器不能返回上一个页面 |
| toString() |
获取当前页面的完整URL，相当于location.href |
1.2 navigator对象
关于web浏览器的有关信息，可以用于检测浏览器和操作系统，navigator对象中的属性是只读的。
| 属性 |
描述内容 |
| userAgent |
用户代理头信息，很多时候用于判断浏览器 |
| appCodeName |
浏览器代码名 |
| appName |
官方浏览器名称，该属性并不一定能返回正确的浏览器名称 |
| appVersion |
浏览器版本信息 |
| cookieEnabled |
是否使用cookie 值为true/false |
| platform |
浏览器所在计算机平台 |
| plugins |
浏览器上所安装的插件 数组。 |
| onLine |
用户当前在线还是离线（浏览器断线)值为true/false |
| cpuClass |
浏览器正在运行的计算机的cpu型号 |
| securityPolicy |
浏览器支持的加密类型 |
可以使用navigator.userAgent属性来判断浏览器类型。
var browserName = window.navigator.userAgent.toLowerCase();
if(/mobi/i.test(browserName)){
// 手机浏览器
if(/android/i.test(browserName)){
alert("安卓");
} else if (/iphone/i.test(browserName)){
alert("iPhone");
}
} else {
//非手机浏览器
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
//只能识别到IE10及以下。
alert("IE");
}else if(/edge/i.test(browserName)){
alert('Edge')
}else if(/firefox/i.test(browserName)){
alert("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
alert("Chrome");
}else if(/opera/i.test(browserName)){
alert("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
alert("Safari");
}else{
alert("unKnow");
}
}但是用户可以改变这个字符串。这个字符串的格式并无统一规定，也无法保证未来的适用性，各种上网设备层出不穷，难以穷尽。已经基本不使用了。
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}可以使用上面的函数来判断IE浏览器了。
1.3 screen对象
包含了用户显示器屏幕相关信息。通过该对象，可以访问用户显示器屏幕宽、高、色深等信息
| 属性 |
描述 |
| width |
屏幕的宽度 |
| height |
屏幕的高度 |
| availWidth |
窗口可以使用的屏幕的宽度 |
| availHeight |
窗口可以使用的屏幕的高度 |
| pixelDepth |
窗口可以使用的屏幕的高度 |
2、window对象的方法
| 方法 |
功能 |
| alert(text) |
创建一个警告对话框，显示一条信息 |
| blur() |
将焦点从窗口移除 |
| close() |
关闭窗口 |
| confirm() |
创建一个需要用户确认的对话框 |
| focus() |
将焦点移至窗口 |
| open(url,name,[options]) |
打开一个新窗口并返回新window 对象 |
| prompt(text,input) |
创建一个对话框要求用户输入信息 |
| scroll(x,y) |
在窗口中滚动到一个像素点的位置 |
| moveBy(x,y) |
按照给定像素参数移动指定窗口,x,y代表水平位移量和垂直位移量 |
| moveTo(x,y) |
将窗口移动到指定的指定坐标(x,y)处 |
| resizeBy(x,y) |
将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小 |
| resizeTo(x,y) |
将当前窗口改变大小，x、y分别为宽度和高度 |
| find() |
调出查找对话框 |
| setInterval(func,time) |
经过指定时间间执行代码 |
| clearInterval("id") |
取消setInterval |
| setTimeout(func,time) |
在定时器超过后执行代码 |
| clearTimeout("id") |
取消还未执行的setTimeout |
| print() |
调出打印对话框 |
下面详细介绍几个常用的
2.1 window.alert()
常用的提示信息，不可以写css样式，可以使用'/n'换行。主要用于调试，现在基本都是使用console。作为用户提示，很不友好。
2.2 window.prompt('提示','值')
输入提示框 返回有三种，确定填写=>值，确定但不填写=>''，取消/关闭=>null
2.3 window.confirm('你确定退出吗？')
提示用户信息，确定=> true , 取消=> false
2.4 window.open(url,'name','type','string')
以type的方式打开名为name的string形式的url网页。
| blank |
在一个新的未命名的窗口载入文档 |
| _self |
在相同的框架或窗口中载入目标文档 |
| _parent |
把文档载入父窗口或包含了超链接引用的框架的框架集 |
| _top |
把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 |
2.5 setTimeout和setInterval
setTimeout(fn,x) x毫秒之后执行 => clearTimeout() 取消
setInterval(fn,x) 每隔x毫秒执行一次 => clearInterval() 取消
function nowTime() {
console.log("this is nowTime");
}
setTimeout(nowTime, 2000);
clearTimeout(nowTime);
function nowTime1() {
console.log("this is nowTime1");
}
setInterval(nowTime1, 2000);
clearInterval(nowTime1);2.6 window.resizeTo()，window.resizeBy()
都是用于缩小窗口大小，
window.resizeTo(window.screen.availWidth/2,window.screen.availHeight/2) 缩小到 多少
window.resizeBy(-200,-200) 缩小了 多少
<button onclick="openOne()">打开</button>
<button onclick="resize()">缩放</button>
var w;
function openOne(){
//有个很奇怪的问题，如果不写url地址，那就可以被成功缩放，但是写了就不行。很奇怪，求解惑
w=window.open('http://www.baidu.com','', 'width=100,height=100');
w.focus();
}
function resize () {
w.resizeBy(500,500);
w.focus();
}2.7 window.scrollTo()，window.scrollBy()
window.scrollTo(x,y)：用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。滚动到
window.scrollBy(0,window.innerHeight)：用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。滚动了
2.8 window.moveTo()，window.moveBy()
window.moveTo() 移动浏览器窗口到指定位置,接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素。 移动到
window.moveBy() 将窗口移动到一个相对位置。它接受两个参数，分布是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素。移动了
2.9 window.focus()，window.blur()
window.focus() 会激活窗口，使其获得焦点，出现在其他窗口的前面
window.blur() 将焦点从窗口移除
over~
拓展：
关注我获取更多前端资源和经验分享
关注后回复 vivi 获取我的微信号，望不吝赐教，pps：可轻撩哈哈
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~