BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
window
BOM 的核心是window对象，它表示浏览器的一个实例。在浏览器中，即是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象。
所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法
var age = 24;
function printName(){
console.log(age);
}
console.log(window.age);
window.printName();
window对象属性
window.innerHeight属性，window.innerWidth属性
这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。
注意，这两个属性值包括滚动条的高度和宽度
windo.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指向父页面。
navigator
Window对象的navigator属性，指向一个包含浏览器相关信息的对象。
navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。
navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36"
通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且无法保证未来的适用性，更何况各种上网设备层出不穷，难以穷尽。所以，现在一般不再识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的JavaScript功能。
URL的编码/解码方法
JavaScript提供四个URL的编码/解码方法。
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
区别
encodeURI方法不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码
1. ASCII字母
2. 数字
3. ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。
如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。 encodeURI("http://blog.jirengu.com/?cat=11&a=饥人谷"); //"http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7";
其中，汉字被编码。但是如果你用了encodeURIComponent，那么结果变为
"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8
下面是几个小问题
- window.onload 和 document.onDOMContentLoaded 有什么区别？
- 当 onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了
- 当 DOMContentLoadded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash
- 如何获取图片真实的宽高？
document.querySelector('img').onload = function () {
console.log(this.widtn) //获取图片的宽
console.log(this.height) //获取图片的高
}
- 如何获取元素的真实宽高？
element.offsetHeight // 元素的真实高度
element.offsetWidth // 元素的真实宽度
这里具体解释一下offsetHeight ，clientHeight，scrollHeight这三个的区别
直接上图，一目了然
-
clientHeight
clientHeight -
offsetHeight
offsetHeight
document.body.clientHeight
document.body.offsetHeight
docuemnt.body.style.border = "10px solid red"
docuemnt.body.clientHeight //变小了
document.body.offsetHeight
- scrollHeight
element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight
document.body.scrollHeight
