BOM基础

BOM

1. 定义

浏览器操作的各种对象组合起来称作浏览器对象模型（Browser Object Model），简称BOM。

2. 组成

JavaScript使用的浏览器对象模型如下图所示：

3.Window对象

1)全局

a).imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象(就是window)所有。
b）一切声明的全局变量，全是window的属性
window 就是全局的域
c）全局作用域里 this —> 指向 window
d）上周博客的DOM中的定时器setInterval();setTimeout();clearInterval();clearTimeout();这四个都是全局对象，都是window 上的方法，内部函数 this 指向 window在全局上就算不写 window. setInterval();他也会上全局的 GO 里面查找，所以不写 window.也行。

2) Window的一些操作

①查看滚动条的滚动距离

a) window.pageXOffset横向/pageYOffset 纵向滚动条
IE8 及 IE8 以下不兼容（IE9 部分兼容）IE9 以上能用
b) IE8 及 IE8 以下的使用方法:
document.body.scrollLeft/scrollTop——求横向距离和纵向距离
document. documentElement.scrollLeft/scrollTop

②查看视口的尺寸

a)
window.innerWidth/innerHeight 可视区域的宽高 （加上 滚动条宽度 / 高度）
IE8 及 IE8 以下不兼容
注意渲染模式：
1 标准模式：<！DOCTYPE html>是 html5 的（在 emmet 插件下 html:5 就出来了）
2 怪异/混杂模式：试图去兼容之前的语法，去掉<！DOCTYPE html>这一行即可开启（向后兼容）
b)
document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器

③让滚动条滚动

a) scroll(), scrollTo(),两个功能一样，里面能填两个参数
scroll(x 轴滚动条的距离，y 轴滚动条的距离)，里面的 xy 可以填负数
b) scrollBy();累加滚动距离

④查询计算样式

window.getComputedStyle(ele,null);
获取伪元素的方法：window.getComputedStyle(ele,null);括号里面要填两个东西，第一个 ele 是填的是你要获取谁，第二个先填写 null（null 解决的就是伪元素的问题，用它可以获取伪元素的样式表）。
注意：
计算样式只读，不可以写入
返回的计算样式的值都是绝对值，没有相对单位

4.Navigator

navigator 对象主要用来获取浏览器的属性，但不同浏览器中navigator对象的属性是不相同的，
下面是一些Navigator的属性：

5.Frames[]

返回窗口中所有命名的框架。
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

6.Location

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

7.History

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
相关属性：

8.Screen

Screen 对象包含有关客户端显示屏幕的信息。
相关属性：