BOM：Brower Object Module 浏览器对象模型，核心对象是window
BOM的特点：
有一系列相关的对象构成，并且每个对象都提供了很多方法与属性缺乏标准包含DOM（1）BOM中的window对象：
是JS访问浏览器窗口的一个接口全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法（在调用的时候可以省略window，name，open，close等都在window对象中，定义变量时要避免重名）（2）window对象中常用的事件：
A： window.onload()：窗口加载事件，当窗口加载完毕才会触发，使用该事件可以将js代码写在对应标签之前；绑定事件时也可以使用监听器的方法。
特点：使用传统方式注册仅能写一次，设置多个仅最后一个有效；只有IE9以上才支持；监听器方式没有个数限制
B： window.onresize：调整窗口大小事件，只要窗口大小发生变化就会触发，常用于响应式布局
window的location用于获取或者设置窗体的url，并且可以解析用于解析url，它返回一个对象。
（1）URL：统一资源定位符
组成：
属性说明protocol通信协议host主机port端口号path路径query参数，以键值对形式，用&符号分开fragment片段，#后面的内容，常用于链接、锚点（2）location对象的属性
属性返回值href获取或者设置整个URLhost返回主机名（域名）port返回端口号pathname返回路径search返回参数hash返回片段例如，做一个自动跳转页面：
<h1></ha1> <span></span> <a href="javascript:;">百度</a> <!--href="javascript:;"用于禁用a标签链接效果，保留样式 --> <script type="text/javascript"> function changePage(){ let seconds = 5; let span = document.querySelector('span'); let timer = setInterval(function(){ seconds--; span.innerHTML = seconds + 's'; if(seconds <= 0){ clearInterval(timer); window.location.href = 'http://baidu.com'; } },1000); let a = document.querySelector('a'); a.addEventListener('click',function(){ window.location.href = 'http://jd.com'; }) } changePage(); </script>（3）location对象的方法
方法说明assign()可用于跳转页面，称重定向页面replace()替换当前页面，不记录历史，不能后退reload()重新加载页面，相当于刷新与f5，参数为true时，相当于强制刷新ctrl+f5Navigator对象包含了浏览器的相关信息，常用的属性有：
userAgent：返回由客户机发送服务器的user-agent头部的值，可以使用match()正则表达式来判断客户机的型号history对象包含浏览历史记录，其中常用的方法有：
方法说明back()返回上一条记录forward()前进到下一条记录（首先跳转过当前页面的下一个页面）go()参数为0时重载当前页面，参数为正数就前进对应数量的记录，参数为负数就后退对应数量的记录1、元素偏移量offset：使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等；
获得元素距离带有定位父元素的大小
获得元素自身的大小（宽度高度）
返回的数值不带单位
注意： offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于 可视区窗口。
常用属性
属性说明element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding 边框 内容区的宽度,返回数值不带单位element.offsetHeight返回自身包括padding 边框 内容区的高度,返回数值不带单位例：获取鼠标在一个盒子中的坐标
let box = document.querySelector('.box'); document.addEventListener('click',function(e){ let x = e.pageX - box.offsetLeft; let y = e.pageY - box.offsetTop; console.log(x,y); })offset与style的区别：
offsetstyle可以得到任意样式表中的样式值仅能得到行内样式值没有单位带单位的字符串offsetWidth包含padding + border + widthstyle.width获得不包含padding 和 borderoffsetWidth等属性是只读属性,只能获取不能赋值style.width等属性是可读写属性因此，获取元素大小位置,使用offset更合适,给元素更改值,style更合适
例：模态框拖动
<button>显示移动框</button> <div class="box"></div> let btn = document.getElementsByTagName('button')[0]; let box = document.getElementsByClassName('box')[0]; btn.onclick = function(){ btn.style.display = 'none'; box.style.display = 'block'; } box.addEventListener('mousedown',getPosition); function getPosition(){ let x = box.offsetWidth/2; let y = box.offsetHeight/2; document.addEventListener("mousemove", move); document.addEventListener("mouseup", up); function move(e){ box.style.top = e.pageY - y + "px"; box.style.left = e.pageX - x + "px" } function up(e) { document.removeEventListener("mousemove", move); } }2、元素师可视区client：通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等；
属性作用element.clientTop返回元素上边框(border)的大小element.clientLeft返回元素左边框(border)的大小element.clientWidth返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位element.clientHeight返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位3、元素滚动scroll：使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等
属性作用element.scrollTop返回被卷去的上侧距离,返回数值不带单位element.scrollLeft返回被卷去的左侧距离,返回数值不带单位element.scrollWidth返回自身实际的宽度,不含边框,返回数值不带单位element.scrollHeight返回自身实际的高度,不含边框,返回数值不带单位4、用法
offset系列经常用于获得元素位置 offsetlLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取滚动距离 scrollTop scrollLeft
页面滚动距离通过window.pageXOffset (window.pageYOffset)获得
例：点击回到顶部：
<style type="text/css"> body{ height: 1000px; } .top{ width: 100%; height: 30px; border: 1px solid red; text-align: center; } .fix{ width: 100px; height: 20px; background-color: blueviolet; position: fixed; right: 0; bottom: 0; display: none; } </style> </head> <body> <div class="top">顶部</div> <div class="fix"> 点击回到顶部 </div> <script type="text/javascript"> let fix = document.querySelector('.fix'); let timer = null; let isTop = true; //获取页面的可视窗口高度 let clientHeight = document.documentElement.clientHeight || document.body.clientHeight; //滚动条滚动时触发 document.addEventListener('scroll',function(){ //在滚动的时候增加判断 let osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop == 0) { fix.style.display = 'none'; }else{ fix.style.display = 'block'; } if (!isTop) { clearInterval(timer); } isTop = false; }); fix.addEventListener('click',function(){ //设置定时器 timer = setInterval(function(){ //获取滚动条距离顶部的高度 let osTop = document.documentElement.scrollTop || document.body.scrollTop; let isSpeed = Math.floor(-osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed; isTop = true; //已经到了顶部时清除定时器 if (osTop == 0) { clearInterval(timer); } },30); }); </script>5、元素的几何尺寸：Element.prototype.getBoundingClientRect();
特点：
兼容性很好
该方法返回一个对象，对象里边有 left,top,right,bottom等属性。
left和 top代表该元素左上角的 X和 Y坐标，right和 bottom代表元素右下角的 X和 Y坐标
返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离
height和 width属性老版本 IE并未实现，要使用offsetWidth与offsetHeight获得
返回的结果并不是“实时的”,方法每一次调用都返回一个新的对象
具体属性：
属性描述top元素上边到视窗上边的距离right元素右边到视窗左边的距离bottom元素下边到视窗上边的距离left元素左边到视窗左边的距离width元素的宽度 （内容区+padding+border+滚动条）height元素的高度 （内容区+padding+border+滚动条）注意：
right 方向的值是基于 元素右侧边框到可视区左边的距离
bottom方向的值是基于 元素底部到可视区顶部的距离
6、查询计算样式： window.getComputedStyle(ele,null)，用于获取当前元素显示了的外部和内部样式的集合；
计算样式只读，返回的值都是绝对值没有相对单位
IE8及其以下不兼容
第二个参数一般为null，也可以是伪元素（befor、after）
由于IE8及其以下不兼容，IE有专门的样式获取方法：ele.currentStyle，用于获取当前显示元素的所有属性，包括行内、内部、外部；
计算样式只读，返回的值都是绝对值没有相对单位
IE独有
例：获取样式
<style type="text/css"> .box{ width: 200px; height: 200px; background-color: lightgreen; } .box::after{ width: 100px; height: 100px; background-color: lightpink; } .box::before{ width: 300px; height: 100px; background-color: lightcoral; } .box:hover{ background-color: lightblue; } </style> </head> <body> <div >添加样式</div> <script> let div = document.querySelector('div'); div.addEventListener('click',function(){ div.classList.add('box'); console.log(div.getComputedStyle(box,null).width); console.log(div.getComputedStyle(box,'befor').backgroundColor); }) </script>