目录
BOM
浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
顶级对象window
window对象是浏览器的顶级对象，它具有双重角色。
1.他是js访问浏览器窗口的一个接口。
2.他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window。
window对象的常见事件
页面(窗口)加载事件
window.οnlοad=function(){}
或
window.addEventListener("load",function(){}
window.onload是窗口(页面)加载事件，当文档内容完全加载完成，会触发该事件，包括图像、脚本文件、css文件等，就调用的处理函数。
document.addEventListener("DOMContentLoaded",function(){})
DOMContentLoaded事件触发时仅当DOM加载完成，不包括样式表，图片，flash等等。
IE 9以上才支持。
如果页面的图片很多的话，从用户访问到onload出发，可能需要较长的时间，交互效果就不能实现必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
</script>调整窗口大小事件
window.οnresize=function(){}
window.addEventListener("resize",function(){})
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：
1.只有窗口大小发生像素变化就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。
<div></div>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>定时器
Window对象给我们提供了两个非常好的方法定时器。
setTimeout()
setInterval()
setTimeout()炸弹定时器
开启定时器
window.setTimeout(调用函数，[延迟的毫秒数])
注意：
1.window可以省略
2.这个调用函数可以直接写函数，或者写函数名，或者采取字符串'函数名()'三种形式，第三种不推荐
3.延迟的毫秒数省略，默认是零，如果写必须是毫秒
4.因为定时期可能有很多种，所以我们经常给定时器复制一个标识符
停止定时器
window.clearTimeout(timeoutID)
注意：
1.window可以省略
2.里面的参数就是定时器的标识符
//5秒之后自动关闭广告
<img src="images/xxx.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>setInterval()闹钟定时器
开启定时器
window.setInterval(调用函数，[延迟的毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间就会调用一次回调函数。
注意：
1.window可以省略
2.这个调用函数可以直接写函数或者写函数名，或者采取字符串'函数名()'三种形式
3.间隔的毫秒数省略，默认是0，如果写必须是毫秒。表示每隔多少毫秒就自动调用这个函数
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
5.第一次执行也是间隔毫秒数之后执行之后每隔毫秒数就执行一次
停止定时器
window.clearInterval(intervalID)
clearInterval()方法取消了先前调用setInterval()建立的定时器。
注意：
1.window可以省略
2.里面的参数就是定时器的标示符
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以调用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也成为location对象。
URL
统一资源定位符，是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎样处理它。
| 组成 | 说明 |
| protocal | 通信协议常用的http,ftp,maito等 |
| host | 主机（域名） |
| port | 端口号 |
| path | 路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式 |
| fragment | 片段 #后面内容 常见于链接锚点 |
location对象属性
| location对象属性 | 返回值 |
| location.href | 获取或设置整个URL |
| location.host | 返回主机 |
| location.port | 返回端口号 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见于链接锚点 |
location对象的常见方法
| location对象方法 | 返回值 |
| location.assign() | 跟href一样，可以跳转页面 |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮 |
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史，所以可以实现后退功能
// location.assign('http://www.baidu.com');
// 不记录浏览历史，所以不可以实现后退功能
// location.replace('http://www.baidu.com');
location.reload(true);
})
</script>history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问的url。
| history对象方法 | 作用 |
| back() | 可以后退功能 |
| forward() | 前进功能 |
| go(参数) | 前进后退功能 参数为1，前进一个页面，参数为-1，后退一个页面 |
元素偏移量offset系列
offset 翻译过来就是偏移量，我们使用oft系列相关属性可以动态的得到该元素的位置，大小等。
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级元素，如果父级没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的高度，返回值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回值不带单位 |
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>元素可视区client系列
client 翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等。
| clien系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding、内容区的高度，不含边框，返回值不带单位 |
| element.clientHeight | 返回自身包括padding、内容区的高度，不含边框，返回值不带单位 |
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
<div></div>
<script>
var div = document.querySelector('div');
console.log(div.clientTop);
console.log(div.clientLeft);
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>元素滚动scroll系列
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。
| scroll系列属性 | 作用 |
| element.scrollTop | 返回被卷去的上侧距离，返回值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回值不带单位 |
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
overflow: auto;
}
</style>
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
</div>
<script>
// scroll 系列
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log(div.scrollTop);
})
</script>