[JavaScript] BOM知识点汇总

---

一，BOM概述

1.1，什么是BOM

• BOM浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，它的核心对象是window。

• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器的标准的一部分。

DOM：

1. DOM是文档对象模型

2. 一个文档（页面）就是一个对象

3. 顶级对象是document，DOM主要学习的是操作页面的元素，是通过接口改变网页的结构和样式。DOM是W3C的标准化组织。

BOM：

• BOM是浏览器对象模型
• 一个浏览器就是一个对象，顶级对象是window
• BOM是学习的浏览器窗口上的交互效果，BOM是浏览器厂商在各自的浏览器上自定义的，兼容性较差。

1.2BOM的构成

• BOM比DOM大，它包含DOM。
• window包含：document,history,location,navigation,screen.
• window对象也是一个接口，通过这个接口我们可以改变浏览器的大小，让浏览器滚动，刷新浏览器等行为，都可以通过window对象改变。
• BOM浏览器对象模型，主要给浏览器做一些交互效果
• BOM中最大的对象是window对象，DOM中的顶级对象document也是window对象中的一个对象而已，里面还包含了其他的history等。

二，window对象的常见事件

2.1窗口加载事件

window.onload=function(){
   
}
window.addEventListener('load',function(){
   
}

• window.onclick是窗口加载事件，当文档内容全部加载完毕会触发该事件，就调用的处理函数。
• 有了window.onclick就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部（包括DOM元素，图片，css等）加载完毕然后触发事件，调用处理函数。
• window.onclick传统的注册事件方式只能写一次，如果有多个会以最后一个window.onclick为准。
• 用window.addEventListener(‘load’,function(){})就没有限制
• 其中当网页中图片过多，或者图片较大的时候就会用DOMContentLoaded事件类型，不用等页面内容全部加载完毕后再执行处理程序，只要等DOM主要的元素标签加载完毕之后，（不包括DOM元素，图片，css等）他就可以触发事件执行处理函数，不用等图片全部加载完毕，运行速度比load快。（可能有一些图片看不见，但是不影响我们JS的交互效果）

2.2调整窗口大小事件

window.onresize=function(){
   }
window.addEventListener(