前言
什么是dom，什么是bom？虽然我们经常用它们，但是我们很容易就把它们两的api给搞混淆，为了避免模糊它们之间的概念我们今天来重新认识它们。
什么是bom
首先我们要理解bom不是boom
bom(我们平时使用的window，全称是Browser Object Model)是浏览器对象模型，它的作用是封装当前浏览器窗口的功能和属性，提供了许多属性和方法来操作窗口、导航、处理事件等，代替了ES标准中的GLobal,充当全局对象。下面还有几个我们经常使用的子对象。
window对象的主要API
下面是window对象的一部分API，主要用于操作窗口、处理定时器、导航等。需要注意的是，某些方法可能在移动设备上具有不同的行为或受限制。或者在部分浏览器中不支持。
| 方法 | 描述 |
|---|---|
window.alert() | 在浏览器中显示一个带有消息和确定按钮的警告框。 |
window.prompt() | 在浏览器中显示一个带有消息和输入框的提示框，接收用户输入的文本。 |
window.confirm() | 在浏览器中显示一个带有消息和确定/取消按钮的确认框，返回用户的选择结果。 |
window.open() | 打开一个新的浏览器窗口或标签页，并加载指定的URL。 |
window.close() | 关闭当前浏览器窗口或标签页。 |
window.setTimeout() | 在指定的延迟时间后执行一次指定的函数或一段代码。 |
window.setInterval() | 每隔指定的时间间隔重复执行指定的函数或一段代码。 |
window.clearTimeout() | 取消之前通过setTimeout()方法设置的定时器。 |
window.clearInterval() | 取消之前通过setInterval()方法设置的定时器。 |
window.scrollTo() | 在窗口中滚动到指定的位置。 |
window.scrollBy() | 在窗口中相对于当前滚动位置滚动指定的偏移量。 |
window.innerWidth | 返回窗口的内部宽度（不包括滚动条）。 |
window.innerHeight | 返回窗口的内部高度（不包括滚动条）。 |
window.outerWidth | 返回窗口的外部宽度（包括边框和滚动条）。 |
window.outerHeight | 返回窗口的外部高度（包括边框和滚动条）。 |
window.location.reload() | 重新加载当前页面。 |
window.location.href | 获取或设置当前页面的URL。 |
window.location.assign() | 加载指定的URL。 |
window.location.replace() | 用指定的URL替换当前页面，无法通过后退按钮返回。 |
history对象的主要API
以下是history的API,允许开发者在不导致页面刷新的情况下，通过JavaScript代码控制浏览器的历史记录，实现前端路由和状态管理等功能。
| 方法 | 描述 |
|---|---|
history.back() | 加载历史记录中的上一个页面。 |
history.forward() | 加载历史记录中的下一个页面。 |
history.go() | 根据历史记录中的相对位置加载页面。 go(0) 刷新页面，go(1) 向前跳转，go(-1) 向后跳转 |
history.pushState() | 向浏览器历史记录添加一个状态，并且不触发页面刷新。 |
history.replaceState() | 替换当前的历史记录状态，并且不触发页面刷新。 |
location对象的主要API
以下是location对象的API这些API方法可以用来获取或设置location对象的不同部分，如主机名、路径、查询字符串等，并且可以通过调用这些方法来导航到其他页面或重新加载当前页面。
location.assign(url) | 加载指定的URL。 |
|---|---|
location.reload() | 重新加载当前页面。 |
location.replace(url) | 用指定的URL替换当前页面，不会在历史记录中创建新条目。 |
location.toString() | 返回当前URL的字符串表示。 |
location.hostname | 设置或返回URL的主机名部分。 |
location.pathname | 设置或返回URL的路径部分。 |
location.search | 设置或返回URL的查询字符串部分。 |
location.hash | 设置或返回URL的片段标识符部分。 |
location.protocol | 设置或返回URL的协议部分。 |
location.href | 设置或返回完整的URL。 |
location.origin | 返回URL的协议、主机和端口部分。 |
location.reload(forced) | 重新加载当前页面，可强制从服务器获取最新页面。 |
location.replace(url) | 用指定的URL替换当前页面。 |
location.searchParams | 返回URL查询字符串的URLSearchParams对象。 |
navigator对象的主要API
以下是navigator对象的API,不同浏览器的navigator对象可能会提供不同的方法和属性。因此，在使用特定方法或属性时，请务必进行兼容性检查，以确保代码在各种浏览器中正常运行。
| 方法 | 功能 |
|---|---|
navigator.userAgent | 返回浏览器的用户代理字符串 |
navigator.cookieEnabled | 检查浏览器是否启用了Cookie |
navigator.platform | 返回运行浏览器的操作系统平台 |
navigator.language | 返回用户使用的浏览器的首选语言 |
navigator.onLine | 检查浏览器是否处于在线状态 |
navigator.geolocation.getCurrentPosition() | 获取用户的地理位置 |
navigator.mediaDevices.getUserMedia() | 请求用户的媒体设备，如摄像头和麦克风 |
navigator.vibrate() | 控制设备振动，使设备产生震动效果 |
navigator.sendBeacon() | 异步发送数据到服务器，适用于小量数据 |
screen对象的主要API
以下是screen对象的主要API,它提供了关于用户屏幕的一些信息，例如屏幕的尺寸、可用空间和颜色深度。通过这些方法，可以根据屏幕的特性来调整页面布局或显示不同的内容。
| 方法 | 描述 |
|---|---|
screen.availHeight | 返回屏幕可用高度（除去操作系统任务栏和工具栏） |
screen.availWidth | 返回屏幕可用宽度 |
screen.height | 返回屏幕的总高度 |
screen.width | 返回屏幕的总宽度 |
screen.colorDepth | 返回屏幕的颜色深度（位数） |
screen.pixelDepth | 返回屏幕的像素深度（位数） |
frames对象的主要API
window.frames 是window的一个属性。这个属性返回的是窗口中iframe 的数组。对于某个iframe 而言，window.frames[0]相当于那个iframe 窗口的window,以下是iframe的API。
| 方法 | 描述 |
|---|---|
iframe.contentWindow | 获取iframe的window对象 |
iframe.contentDocument | 获取iframe的document对象 |
什么是dom？
一样我们也要理解dom不是bom，但是bom中包含了dom，dom是文档对象模型(我们平时使用的document，全称是Document Object Model)。提供操作页面元素的方法和属性，是HTML和XML的API，以下是dom的部分API.
| 方法 | 描述 |
|---|---|
document.getElementById(id) | 根据元素的 id 属性获取对应的元素。 |
document.getElementsByClassName(className) | 根据元素的 class 属性获取对应的元素集合。 |
document.getElementsByTagName(tagName) | 根据元素的标签名获取对应的元素集合。 |
document.querySelector(selector) | 根据 CSS 选择器选择匹配的第一个元素。 |
document.querySelectorAll(selector) | 根据 CSS 选择器选择匹配的所有元素。 |
document.createElement(tagName) | 创建指定标签名的元素节点。 |
document.createTextNode(text) | 创建包含指定文本内容的文本节点。 |
document.appendChild(node) | 将一个节点添加为另一个节点的子节点。 |
document.removeChild(node) | 从父节点中移除指定的子节点。 |
document.replaceChild(newNode, oldNode) | 将一个节点替换为另一个节点。 |
document.cloneNode(deep) | 克隆一个节点，并可选择是否深度克隆其子节点。 |
document.setAttribute(name, value) | 设置元素的指定属性名的属性值。 |
document.getAttribute(name) | 获取元素的指定属性名的属性值。 |
document.removeAttribute(name) | 移除元素的指定属性名。 |
document.addEventListener(type, listener) | 为元素添加事件监听器。 |
document.removeEventListener(type, listener) | 移除元素的事件监听器。 |
document.querySelector(selector) | 根据 CSS 选择器选择匹配的第一个元素。 |
document.querySelectorAll(selector) | 根据 CSS 选择器选择匹配的所有元素。 |
document.getElementById(id) | 根据元素的 id 属性获取对应的元素。 |
document.getElementsByClassName(className) | 根据元素的 class 属性获取对应的元素集合。 |
document.getElementsByTagName(tagName) | 根据元素的标签名获取对应的元素集合。 |
document.createElement(tagName) | 创建指定标签名的元素节点。 |
document.createTextNode(text) | 创建包含指定文本内容的文本节点。 |
document.appendChild(node) | 将一个节点添加为另一个节点的子节点。 |
document.removeChild(node) | 从父节点中移除指定的子节点。 |
document.replaceChild(newNode, oldNode) | 将一个节点替换为另一个节点。 |
document.cloneNode(deep) | 克隆一个节点，并可选择是否深度克隆其子节点。 |
document.setAttribute(name, value) | 设置元素的指定属性名的属性值。 |
document.getAttribute(name) | 获取元素的指定属性名的属性值。 |
document.removeAttribute(name) | 移除元素的指定属性名。 |
document.addEventListener(type, listener) | 为元素添加事件监听器。 |
document.removeEventListener(type, listener) | 移除元素的事件监听器。 |
document.querySelector(selector) | 根据 CSS 选择器选择匹配的第一个元素。 |
document.querySelectorAll(selector) | 根据 CSS 选择器选择匹配的所有元素。 |
document.getElementById(id) | 根据元素的 id 属性获取对应的元素。 |
document.getElementsByClassName(className) | 根据元素的 class 属性获取对应的元素集合。 |
document.getElementsByTagName(tagName) | 根据元素的标签名获取对应的元素集合。 |
document.createElement(tagName) | 创建指定标签名的元素节点。 |
document.createTextNode(text) | 创建包含指定文本内容的文本节点。 |
document.appendChild(node) | 将一个节点添加为另一个节点的子节点。 |
document.removeChild(node) | 从父节点中移除指定的子节点。 |
document.replaceChild(newNode, oldNode) | 将一个节点替换为另一个节点。 |
document.cloneNode(deep) | 克隆一个节点，并可选择是否深度克隆其子节点。 |
document.setAttribute(name, value) | 设置元素的指定属性名的属性值。 |
document.getAttribute(name) | 获取元素的指定属性名的属性值。 |
document.removeAttribute(name) | 移除元素的指定属性名。 |
document.addEventListener(type, listener) | 为元素添加事件监听器。 |
document.removeEventListener(type, listener) | 移除元素的事件监听器。 |
document.querySelector(selector) | 根据 CSS 选择器选择匹配的第一个元素。 |
document.querySelectorAll(selector) | 根据 CSS 选择器选择匹配的所有元素。 |
什么是dom树？
DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树，DOM树中的节点均可通过javascript进行访问，所有html节点均可被修改或删除，也可以创建新节点。
DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。
- 文档节点：在树的顶端是文档节点，它呈现整个页面。
- 元素节点：需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。
- 属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。
- 文本节点：当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。
什么是dom事件流？
dom事件流就是dom事件执行的顺序流，它通常有3个阶段
- 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。（顺序是从上往下）
- 目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发；
- 冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。（顺序是从下往上）
document.addEventListener() 和 window.addEventListener() 的区别
一个是绑定在document上的，一个是绑定在window上的，我们来看一段代码
<script>
window.addEventListener('click',function(){
alert("window click!");
})
document.addEventListener('click',function(){
alert("document click!");
})
</script>
输出的结果是顺序是：document click!、window click!为什么是这样呢？
根据dom事件流分析：首先body被html包裹，而html被document包裹，而document被window包裹，总结上面的顺序，为：body=》html=》document=》window。所以当鼠标点击下去的时候，首先点击的是window，然后到document知道点击的页面元素，然后当传到元素的时候，这个事件就像，到了水底后，然后又把水泡冒出来显示给用户。。直到window显示结束。所以输出顺序是document click! --> window click!，它们的区别一个是绑在全局window上的，一个是绑定在document上的。特别是vue单页面一定要记得在组件销毁的时候进行window.removeEventListener。
送大家一朵小花花，希望大家点点赞
总结
在前端开发中，DOM和BOM通常一起使用，通过DOM操作文档内容，而通过BOM与浏览器进行交互，实现与用户界面和浏览器环境的交互效果，合理使用BOM的功能，可以实现与浏览器窗口、历史记录、屏幕尺寸等相关的交互，提供更好的交互体验。但是因为BOM没有特定的标准，使用BOM时应考虑兼容性、安全性、性能和异步操作等方面的注意事项。
