BOM
BOM是什么？
BOM == Browser Object Model == 浏览器对象模型。
js运行在浏览器中，每个页面都是一个window对象，主要关注点有以下：
- Window对象
- Screen
- Location
- History
- Navigator
- 对话框
1.Window
【说明】 所有浏览器均支持，表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是window对象的属性
- 全局函数是window对象的方法
为我们提供了操作浏览器的方法，比如关闭、开启页面，SPA中改变、禁用“后退”按钮。
2.Screen
【说明】 每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息，对于移动开发来说，通过Screen对象可获知设备的分辨率、DPI、可用尺寸等信息。
| 常用属性 | 描述 |
|---|---|
| height | 返回显示器屏幕的高度 |
| width | 返回显示器屏幕的宽度 |
| pixelDepth | 返回显示屏幕的颜色分辨率 |
| availHeight | 可用高度（除开系统任务栏） |
| availWidth | 可用宽度 |
3.Location
【说明】 Location 对象包含有关当前 URL 的信息。
| 常用属性 | 描述 |
|---|---|
| 例子 | http://example.com:1234/test/test.htm#part2 |
| hash | 设置或返回 #part2 |
| host | 设置或返回 example.com:1234 |
| href | 设置或返回 http://example.com:1234/test/test.htm#part2 |
| protocol | 当前 URL 的协议 http: |
| pathName | 当前访问路径 /test/test.htm |
| 方法 | 描述 |
|---|---|
| assign() | 加载新的文档 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
4.History
【说明】 History 对象包含用户（在浏览器窗口中）访问过的 URL。
| 常用属性 | 描述 |
|---|---|
| length | 返回浏览器历史列表中的 URL 数量 |
| back() | 加载浏览器历史列表中的前一个 URL |
| forward() | 加载浏览器历史列表中的下一个 URL |
| go() | 加载浏览器历史列表中指定URL |
5.Navigator
【说明】 Navigator 对象包含有关浏览器的信息。通过该对象可了解浏览器详细信息（版本、厂商、OS、插件等），不是可信的，因为1.所有东西都可以被修改，2.浏览器会识别错误。
| 常用属性 | 描述 |
|---|---|
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| platform | 返回运行浏览器的操作系统平台 |
6.对话框
- alert() //单纯提示
- confirm() //询问确认可返回布尔值
- prompt() //用户可输入内容并返回
DOM
DOM是什么？
DOM == Document Object Model == 文档对象模型
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问，从而实现动态操作DOM。主要关注点有以下：
- DOM节点
- DOM方法
- DOM属性
- DOM查询
- DOM修改
- DOM事件
- DOM导航
1.DOM节点
【说明】 在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
2.DOM方法
【说明】 HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。
常用方法
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
3.DOM属性
【说明】 HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。
常用属性
-
innerHTML - 节点（元素）的文本值
-
nodeName - 节点（元素）的名称
-
nodeValue - 节点（元素）的值
-
nodeType - 节点（元素）的类型
元素类型 NodeType 元素 1 属性 2 文本 3 注释 8 文档 9
4.DOM查询
【说明】 访问 HTML DOM = 查找 HTML 元素。
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
5.DOM修改
【说明】 修改 HTML = 改变元素、属性、样式和事件。
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
6.DOM事件
【说明】 JavaScript 能够对 HTML 事件（或者说用户）做出反应。
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）http://www.yiidian.com/dom/what-is-dom.html