JavaScript的三大组成部分：ECMAScript，文档对象模型（DOM），浏览器对象模型（BOM）
文档对象模型（DOM）
什么是DOM？
文档对象模型（Document Object Model, 简称DOM），是W3C组织规定的处理HTML的标准编程接口。 通过DOM API，用于操作页面元素。
常用DOM操作
主要包括：增、删、改、查、事件操作
增、删、改、查（思维导图）
事件操作
-
事件三要素
- 绑定元素
- 触发事件
- 响应函数
document.addEventListener(event, function[, useCapture])
| 参数 | 描述 |
|---|---|
| event（必选） | 字符串，描述事件名称 |
| function（必选） | 函数，触发事件后执行的函数 |
| useCapture（可选） | 布尔值，true捕获阶段执行，false冒泡阶段执行 |
- 常用事件总结
| 常见事件（鼠标） | 触发条件 |
|---|---|
| click | 单击 |
| dblclick | 双击 |
| mouseenter | 鼠标悬停在元素上,替代mouseover |
| mouseleave | 鼠标离开元素,替代mouseout |
| focus | 鼠标按键按下 |
| blur | 鼠标按键抬起 |
| 常见事件（键盘） | 触发条件 |
|---|---|
| keydown | 键盘按键按下 |
| keypress | 键盘按键按下，仅用于字符按键，不识别功能键 |
| keyup | 键盘按键抬起 |
执行顺序：keydown → keypress → keyup
- DOM事件流
DOM事件流：DOM事件发生的顺序，可以分为事件捕获阶段和事件冒泡阶段。
TIPS
- onclick和attchEvent只有冒泡
- document.addEventListener(event, function[, useCapture]) true为事件捕获，false/省略为事件冒泡
- 部分事件类型无冒泡（blur...）
事件委托（代理、委派）：不给每个子元素单独设置事件监听，而是设置在其父元素上，利用冒泡原理间接设置到每个子节点，提升程序性能。
例子： 将多个子元素（li）的事件监听委托给父元素（ul），父元素利用event.target获取子元素，并通过子元素调用（call）
- 事件对象
在触发 DOM 上事件时，会产生一个事件对象 event，这个对象中包含着所有与该事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
ele.onclick = funciton(event) {}
浏览器对象模型（BOM）
什么是BOM？
BOM（Browser Object Model）即浏览器对象模型，用于与浏览器窗口进行交互 核心对象为window，可用console.dir(window)查看window的属性和方法 BOM包含了DOM
DOM和BOM的区别
window对象
| 页面加载事件 | |
|---|---|
| load | DOM全部加载完成 |
| DOMContentLoaded | 仅当DOM加载完成，不包括样式表，图片，flash等，ie9以上支持 |
| 调整窗口 | |
| resize | 窗口大小发生改变时（js实现响应式页面） |
| 定时器 | |
|---|---|
| setTimeout() 和 clearTimeOut() | 倒计时结束后，调用一次回调函数。 |
| setInterval() 和 clearInterval() | 每隔一段时间，调用一次回调函数。 |
location对象
location是最有用的BOM对象之一，提供了当前窗口中加载文档的信息，以及通常得导航功能
| 属性 | |
|---|---|
| location.href | 返回完整的URL |
| location.host | 返回域名 |
| location.search | 返回一个URL的查询部分 |
| 方法 | |
| location.assign() | 载入一个新的文档 |
| location.reload() | 重新载入当前文档 |
| location.replace() | 用新的文档替换当前文档 |
history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。 History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问
| 属性 | |
|---|---|
| history.length | 返回历史列表中的网址数 |
| 方法 | |
| history.forward() | 加载 history 列表中的前一个 URL |
| history.back() | 加载 history 列表中的下一个 URL |
| history.go() | 加载 history 列表中的某个具体页面 |
