BOM DOM 个人总结

Posted 2020-10-16

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 元素
• 改变事件（处理程序）http://www.yiidian.com/dom/what-is-dom.html