BOM
- 浏览器对象模型，操作浏览器的
- window是浏览器中的顶级对象----即顶配
- document是页面中的顶级对象----次顶配
- BOM核心的window对象在浏览器中，即是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象
//所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法
var age = 24;
function printName(){
console.log(age);
}
console.log(window.age);
window.printName();
window对象属性
1.window.innerHeight属性，window.innerWidth属性
这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。
注意，这两个属性值包括滚动条的高度和宽度。
2.scrollX、scrollY
(1).scrollX：滚动条横向偏移
(2).scrollY：滚动条纵向偏移
这两个值随着滚动位置变化而变化
3.scrollTo、scrollBy、scroll
(1).我们也可以通过方法scrollTo或者scroll方法改变滚动条位置到指定坐标
window.scrollTo(0, 200);
// 滚动条移动到200px处
两个参数分别是水平、垂直方向偏移
(2).scrollBy可以相对当前位置移动滚动条，而不是移动到绝对位置
scrollBy(0, 150); // 滚动条下移150px
4.window.frames
window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每个成员对应的是框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。
var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;
上面代码用于获取框架页面的标题。
iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。
在iframe框架内部，使用window.parent指向父页面。
5.navigator
- Window对象的navigator属性，指向一个包含浏览器相关信息的对象。
- navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。
navigator.userAgent // "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36"
通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，更何况各种上网设备层出不穷，难以穷尽。所以，现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。
6.screen
screen对象包含了显示设备的信息。
// 显示设备的高度，单位为像素
screen.height
// 1920
// 显示设备的宽度，单位为像素
screen.width
// 1080
一般使用以上两个属性，了解设备的分辨率。上面代码显示，某设备的分辨率是1920x1080。除非调整显示器的分辨率，否则这两个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
7.window.getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
一看这个函数的名字我们就知道问题解决了
var style = window.getComputedStyle("元素", "伪类");
第二个参数没有伪类则不设置
var div = document.getElementById('test');
console.log(getComputedStyle(div).width);
currentStyle
这个是低版本IE的实现方案，我们可以写个兼容的方式
element.currentStyle ?
element.currentStyle : window.getComputedStyle(element, null)
二、URL的编码/解码方法
JavaScript提供四个URL的编码/解码方法。
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
区别
1.encodeURI方法不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'
2.encodeURIComponent方法不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
- 实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。
