JS之BOM
BOM是什么
BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间的层次关系的模型，浏览器对象模型提供了独立于内容的，可以与浏览李窗口进行互动的对象结构。
BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
BOM的核心
window
BOM的核心是window对象，它表示浏览器的一个实例。
在浏览器中，window对象既是JavaScript访问浏览器窗口的一个接口，又是ECMAscript规定的Global对象，这就意味着在网页中定义的任意变量，函数，对象都是以window作为Global对象。
所有在全局作用域中声明的变量、函数、对象都活作为window的属性和方法。
var age = 18;
function ages(){
console.log(age);
}
console.log(window.age); //18
window.ages(); //18
window对象属性
-
window.innerHeight和window.innerWidth
这两个属性返回网页的css布局占据的浏览器窗口的宽度和高度，单位是像素。
当用户放大网页，这两个属性会变小
注意，这两个属性值包括滚动条的高度和宽度。
-
scrollX和scrollY
-
scrollX：滚动条横向偏移 -
scrollY：滚动条纵向偏移
-
这两个值随着滚动位置变化而变化
-
scrollTo、scrollBy、scroll
scrollTo和scroll方法改变滚动条的位置到指定坐标
window.scrollTo(0,200); //滚动条移动到200px处
两个参数分别是水平、垂直方向偏移
scrollBy可以相对向前位置移动滚动条，而不是移动绝对位置
window.scrollBy(0.50); //滚动条向下移动50px
-
window.frames
window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。
window.frames的每个成员对应的框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。
var iframe = window.getElementsByTagName("iframe")[0];
var iframeTitle = iframe.contentWindow.title;
上面代码用于获取框架页面的标题。
iframe元素遵守同源策略，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。
在iframe框架内部，使用window.parent指向父页面。
-
navigator
window对象的navigator属性，指向一个包含浏览器相关信息的对象。
navigator.userAgent属性返回浏览器的User-Agent字符串，用来表示浏览器的种类。
console.log(window.navigator.userAgent); //"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36"
通过userAgent属性识别浏览器，不是一个好办法，因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，各种上网设备层出不穷，很难列举，所以现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。
-
screen
screen对象包含了显示设备的信息
//显示设备的高度，单位是像素
screen.height
//显示设备的宽度，单位是像素
screen.width
一般使用上面两个属性，了解设备的分辨率。除非调整显示器的分辨率或者更换设备，否则这两个值可以看做常量，不会发生变化。
显示器的分辨率与浏览器的设置无关，缩放网页并不会改变分辨率。
-
window.getComputedStyle
getComputedStyle是一个可以获取抢钱元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象（[object CSSStyleDeclaration]）
//如果没有伪类则不设置
var style = window.getComputedStyle("元素"，“伪类”)；
var div = document.querySelector(".test");
console.log(getComputedStyle(div));
currentStyle
这个是低版本IE的实现方案，我们可以写个兼容的方式
element.currentStyle ? element.currentStyle : window.getComputedStyle(element);
-
URL编码和解码
JavaScript提供了两种URL的编码/解码方式
-
encodeURI()/decodeURI() -
encodeURIComponent()/decodeURIComponent()
encodeURI()和encodeURIComponent()的区别：
encodeURI()不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!@#$&()+:/,;?+'
encodeURIComponent()方法不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!*()'
从上面可以看出，encodeURIComponent()方法比encodeURI()方法编码范围大。
实际例子来说，encodeURIComponent()会把http://编码成http%3A%2F%2F，而encodeURI不会
- alert()、prompt()、confirm()（不常用）
alert()、prompt()、confirm()都是浏览器用来与用户互动的方法。它们会弹出不同的对话框，要求用户做出回应。
需要注意的是，alert()、prompt()、confirm()这三个方法弹出的对话框，都是浏览器统一规定的样式，是无法定制的。（这是现在不常用的原因）
alert方法弹出的对话框，只有一个“确定”按钮，一般用来通知用户的某些信息。用户只有点击“确定”按钮，对话框才会消失。在对话框弹出期间，浏览器窗口处于冻结状态，如果不点“确定”按钮，用户什么也干不了。
prompt方法弹出的对话框，在提示文字的下方还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮，一般用来获取用户输入的数据。返回值是一个字符串（有可能为空）或者null，具体分为三种情况：
- 用户输入信息，并点击“确定”，则用户输入的信息就是返回值
- 用户没有输入信息，直接点击“确定”，则输入框的默认值就是返回值
- 用户点击了“取消”（或者按了Esc按钮），返回值是null
confirm方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，一般用来征询用户的意见。返回值是一个布尔值，如果用户点击“确定”，则返回true，如果用户点击“取消”，则返回false。
//alert
alert("这是一个弹出层");
//prompt
var result = prompt("您的年龄？", 18); //18是设置的默认值，默认显示
//confirm
var results = confirm("吃了吗？");
