「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」
前言
经常会看到DOM和BOM两个词，那么这两个到底是什么呢？区别又是什么？
文档对象模型（DOM）
文档对象模型（Document Object Model），简称 DOM。
- 它是HTML和XML文档的编程接口。
- 它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容
示例：
// 将背景颜色修改为红色
document.body.style.background = "red";
想查看更多，可以看这个👉DOM Living Standard
Document
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树
DOM 树包含了像 <body> 、<table> 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。
浏览器对象模型（BOM）
浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象。如
- 浏览器的标签页，地址栏（前进、后退等），搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等
- 浏览器的右键菜单
- 浏览器滚动条等
window对象
window 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。
| 属性 | 描述 |
|---|---|
| window.close() | 关闭窗口 |
window.alert("message") | 弹出一个具有OK按钮的系统消息框，显示指定的文本 |
window.confirm("Are you sure?") | 弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值 |
window.prompt("What's your name?", "Default"); | 提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回 |
| ... | ... |
Navigator对象
【导航器对象】：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用
可以通过window.navigator访问，例如window.navigator.appVersion
| 属性 | 描述 |
|---|---|
appVersion | 返回浏览器版本 |
connection | 获取设备的网络连接信息 |
geolocation | 访问设备的地理位位置信息 |
language | 表示用户的首先语言，通常是浏览器用户界面的语言。 当未知的时，返回null |
onLine | 浏览器是否联网 |
| ... | ... |
Location对象
【位置对象】：表示载入窗口的URL
可以通过document.location或window.location访问
document.location = 'http://www.example.com'
等同于
document.location.href = 'http://www.example.com'
window.location = 'http://www.example.com'
等同于
window.location.href = 'http://www.example.com'
| 属性 | 描述 |
|---|---|
href | 设置或返回完整的URL |
search | 设置或返回从问号(?)开始的URL |
host | 设置或返回主机名和当前URL的端口号 |
| ... | ... |
| 方法 | 描述 |
|---|---|
assign(URL) | 加载新的文档 |
reload() | 重新加载当前页面 |
replace(newURL) | 用新的文档替换当前文档 |
| ... | ... |
History对象
【历史对象】：浏览历史
| 方法 | 描述 |
|---|---|
back() | 返回前一个URL |
forward() | 返回下一个URL |
go | 返回某个具体页面 |
| ... | ... |
Screen对象
【显示器对象】：用于获取某些关于用户屏幕的信息
| 属性 | 描述 |
|---|---|
availHeight | 返回显示屏幕的可用高度（不包括Windows任务栏） |
availWidth | 返回显示屏幕的可用宽度（不包括Windows任务栏） |
height | 返回屏幕的像素高度 |
width | 返回屏幕的像素宽度 |
DOM 和 BOM的区别
| DOM | BOM |
|---|---|
| 文档对象模型，把【文档】当对象 | 浏览器对象模型，把【浏览器】当对象 |
顶级对象是document | 顶级对象是window |
定义了JS操作页面元素的一些方法 | 定义了JS操作浏览器的一些方法 |
参考资料：
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
