快速认识什么是BOM

什么是BOM？

BOM（Brower Object Model）即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.(比如：后退，前进，刷新页面，浏览器窗口变化，滚动条滚动这些操作都属于BOM的管辖范围)

 

 

DOM与BOM的区别：

 

 

BOM的构成：

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

 

（window对象内容较多，放在后面，先说下面5个）

1 所有获取元素的完整写法是window.document.querySelector()【具体在：什么是DOM那篇随笔】

2 location:

locathion主要目的就是获得，设置URL

2.1location对象的属性：

 

在编辑器中可以console.dir(location) 看看这个对象的属性，方法

两个案例：页面传递参数(locetion.search)，页面自动跳转(location.href)

 

2.2locathon对象的方法

 

3 navigator对象

navigator对象包含有相关浏览器的信息，他有很多属性，我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值（可以看到操作系统，浏览器信息）

下面代码可以判断用户哪个终端打开页面实现跳转

比如我们可以在PC端写下面一段代码来让他打开手机设备时跳转到手机页面

 

 

4 screen对象

屏幕的信息。

 

5 history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户在浏览器窗口中访问过的URL 

forward() 与 back() 相当于浏览器的前进与后退按钮。

 

 

最后，讲一下window对象

 1 window对象常见的事件

1.1 窗口加载事件：load

 

 窗口加载事件：DOMContentLoaded

 

 

 load与DOMContentLoaded区别：

 

 

1.2 调整窗口大小事件

 

2 window对象的函数（定时器）

 

（补充回调函数概念）：

 

JS执行机制

****过程中会有事件循环，事件循环：由于主线程不断的重复获得任务，执行任务，在获得任务再执行，这个过程称为事件循环，所以onclick = function(){}这种异步任务才不会只执行一次

 

 

 

总结：

BOM浏览器对象模型，学习BOM也是学习几个对象，首先其核心对象就是window，window涉及的事件（页面加载事件），函数（定时器），JS执行机制（同步异步的处理，事件循环）。window对象下面还有 document对象()，location对象（获取设置URL），nabigator（浏览器的信息），screen(显示屏信息)，history（与浏览器历史进行交互）