导图社区 BOM
这是一篇关于BOM的思维导图，包括：概述、窗口加载事件、窗口大小事件、定时器、JS执行机制、location对象、元素偏移量offset系列、client系列。
这是一篇关于ES6新增语法的思维导图，主要内容有flex布局、媒体查询、音视频标签、语义化标签、布局等。
这是一篇关于AJAX的思维导图，包括：简介、xml、AJAX特点、同步和异步、进程和线程、XMLHttpRequest对象、请求类型。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
BOM
概述
BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM为标准化
DOM和BOM的区别
DOM
文档对象模型
DOM就是把（文档）当做一个（对象）来看待
DOM的顶级对象是document
DOM主要学习的是操作页面元素
浏览器对象模型
把（浏览器）当做一个（对象）来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
内置弊端：阻塞代码执行
双重角色
它是JS访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。调用时可省略window。
窗口加载事件
window.onload=function(){} 或者 window.addEventListener("load",function(){})
window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件），就调用的处理函数。
注意：有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window。onload为准。如果使用addEventListener则没有限制。
DOMContentLoaded事件触发时，仅当DOM加载完成，不包含样式表，图片，flash等。document.addEventListener("DOMContentLoaded",function(){})
窗口大小事件
window.onresize=function(){} 或者 window.addEventListener("resize",function(){})
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
注意：只要窗口大小发生像素变换，就会触发这个事件。利用这个事件可以完成响应式布局。window.innerWindth当前屏幕的宽度。
定时器
setTimeout（调用函数，延迟毫秒数）
setInterval（回调函数，间隔毫秒数）
setTimeout()这个调用函数我们也称为回调函数callback，普通函是按照代码顺序直接调用。这个函数需要等待，时间到了才去调用这个函数，因此称为回调函数。
seInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
停止定时器：clearTimeout（timer），clearInterval（timer）
this的指向：在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁， 一般情况下this的最终指向的是那个调用它的对象。
JS执行机制
js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序，常见浏览器无反应，可能就是一段代码死循环，造成程序卡住在这个位置，无法继续为了解决这个问题，js的执行模式分为两种：同步和异步。
"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。同步任务都在主线程上执行，形成一个执行栈
"异步模式"，异步任务是通过回调函数实现的。前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
执行顺序：1. 先执行执行栈中的同步任务，2. 异步任务放到任务队列中，3. 一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待，进入执行栈，开始执行。
事件循环：由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（even loop）
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL
URL：统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含是信息指出文件的位置以及浏览器应该怎么处理它。
URL语法格式：protocol://host[:port]/path/[?query]#fragment；http://www.itcast.cn/index.html?name=andy&age=18#link；[协议名]://[用户名]:[密码]@[服务器地址]:[服务器端口号]/[路径]?[查询字符串]#[片段ID]
URL组成
----------------------------------------------------------------------------------------
protocol：通信协议 常用的http，ftp，maito等。
host：主机（域名）www.baidu.com
port：端口号可选，省略时使用方案的默认端口 如http的默认端口为80
path：路径 由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query：参数 以键值对的形式，通过&符号分隔开来
fragment：片段 #后面内容常见于链接锚点
location对象的属性
location.href：获取或者设置整个URL
location.host：返回主机（域名）www.baidu.com
location.port：返回端口号，如果未写返回空字符串
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段，#后面内容常见于链接 锚点
location对象的方法
location.assign（'跳转链接'），跟href一样，可以跳转页面，也成为重定向页面
location.replace（'跳转链接'），替换当前页面，因为不记录历史，所以不能后退页面
location.reload（true/false），重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5
Navigator对象
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的时userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
history对象
与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL。
对象方法
history.back（）可以后退功能
history.forward（）前进功能
history.go（参数）前进后退功能，参数如果是1前进一个页面，如果-1后退一个页面
元素偏移量offset系列
offset可以动态的得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身大小（宽度高度）
注意：返回的数值都不带单位
属性
element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没定位则返回body。
element.offsetTop：返回元素相对带有定位父元素上方的偏移
element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
element.offsetWidth：返回自身，内边距+内容+边框=宽度
element.offsetHeight：返回自身，内边距+内容+边框=高度
offset与style的区别
offset
可以得到任意样式表中的样式值
获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth只读属性，只能获取不能赋值
style
只能得到行内样式表中的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获取也可赋值
client系列
element.clientTop：返回元素上边框的大小
element.clientLeft：返回元素左边框的大小
element.clientWidth：返回自身包括padding、内容区宽度，不含边框，返回数组不带单位
element.clientHeight：返回自身包括padding、内容区高度，不含边框，返回数组不带单位
scroll滚动事件
element.scrollTop：返回被卷去的上边距离，返回数值不带单位
element.scrollHeight：返回被卷去的左边距离，返回数值不带单位
element.scrollWidth：返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight：返回自身实际的高度，不含边框，返回数值不带单位
window.pageYOffset：页面被卷去的头部
document.documentElement.scrollTop 上下滚动距离
可视区宽度：document.documengElement.clientWidth
可视区高度：document.documengElement.clientHeight
本地储存
cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。是记录在用户浏览器中的信息，通常情况下是以“键/值”的形式进行存储的，可设置过期的时间.
特征
跨页面共享数据。
分为临时cookie和设置过期时间的cookie
可能被禁用
与浏览器相关，不能互相访问，（cookie跨域可以实现，存储安全性风险）
可能被用户删除
安全性不够高
存储空间很小，大约4kb左右
必须要通过本地服务器来预览。 不能以file的形式
本地储存特性
数据储存在用户浏览器中
设置、读取方便、刷新页面不会丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify()编码后存储
webStorage
webStorage是h5提供的新特性，用来保存数据，让数据在浏览器上共享。它分两种类型：
sessionStorage会话储存：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式储存使用
存储数据：sessionStorage.setItem（key,value）
获取数据：sessionStorage.getItem（key）
删除数据：sessionStorage.removeItem（key）
删除所有数据：sessionStorage.clear（）
localStorage本地储存：
生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享（同一个浏览器可以共享）
用法同上^
