BOM、DOM理解

JavaScript的实现包括以下3个部分：

• 核心（ECMAScript）：描述了JS的语法和基本对象。
• 文档对象模型 （DOM）：处理网页内容的方法和接口
• 浏览器对象模型（BOM）：与浏览器交互的方法和接口

本文以目录结构梳理两者的常用属性和方法。

BOM

BOM是什么？

BOM == Browser Object Model == 浏览器对象模型。

js运行在浏览器中，每个页面都是一个window对象，主要关注点有以下：

1. Window对象
2. Screen
3. Location
4. History
5. Navigator
6. 对话框

---

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。主要关注点有以下：

1. DOM节点
2. DOM方法
3. DOM属性
4. DOM查询
5. DOM修改
6. DOM事件
7. 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 元素
• 改变事件（处理程序）