聊聊JS中的Dom与Bom

​

 什么是Dom？什么是Bom？

DOM（文档对象模型）和BOM（浏览器对象模型）是JavaScript中两个非常重要的概念，它们允许开发者与浏览器交互并操作网页内容

详细说说：

DOM（文档对象模型）

1. DOM的基本概念：

   • DOM是HTML和XML文档的编程接口，它将文档结构呈现为一个节点树。

2. 节点类型：

   • 元素节点、属性节点、文本节点、注释节点等。

3. 选择元素：

   • 使用document.getElementById()、document.getElementsByTagName()、document.querySelector()和document.querySelectorAll()等方法。

4. 创建和删除元素：

   • 使用document.createElement()创建新元素，使用parentNode.removeChild()删除元素。

5. 修改元素属性和内容：

   • 通过属性访问和修改元素的属性，使用textContent或innerHTML修改元素内容。

6. 添加和删除类：

   • 使用classList.add()、classList.remove()等方法。

7. 事件监听：

   • 为元素添加事件监听器，使用addEventListener()方法。

8. 遍历DOM树：

   • 使用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling。

9. 样式操作：

   • 通过style属性直接操作元素的CSS样式。

10. DOM操作的最佳实践：

    • 如何避免性能瓶颈，比如减少DOM操作次数。

BOM（浏览器对象模型）

1. BOM的基本概念：

   • BOM提供了与浏览器交互的方法和属性，例如窗口大小、导航、历史记录等。

2. 窗口对象（window） ：

   • 代表浏览器窗口，是BOM中最重要的对象。

3. 导航和位置：

   • 使用window.location和window.history进行页面导航和状态管理。

4. 窗口尺寸：

   • 通过window.innerWidth、window.innerHeight获取窗口尺寸。

5. 滚动操作：

   • 使用window.scroll()、window.scrollTo()和window.scrollBy()。

6. 弹出和关闭窗口：

   • 使用window.open()和window.close()。

7. 定时器：

   • 使用setTimeout()和setInterval()进行定时操作。

8. 浏览器信息：

   • 通过navigator.userAgent获取浏览器信息。

9. 跨文档消息传输：

   • 使用window.postMessage()实现跨文档通信。

10. 全屏API：

    • 使用全屏API控制网页的全屏显示。

11. BOM的安全性和隐私：

    • 如何处理跨域问题，保护用户隐私。

12. BOM与DOM的交互：

    • 如何结合DOM和BOM来实现复杂的页面交互。

Dom与Bom有什么不同？

好的，让我们用一个简单的比喻来理解DOM和BOM的区别：

想象一下你正在使用一个网页浏览器，这个浏览器就像是一个房子。

• DOM（文档对象模型） 就像是房子内部的家具和装饰品。你可以想象DOM是房子里的沙发、桌子、椅子、照片等。通过DOM，你可以精确地控制网页上每个元素，比如改变一个按钮的颜色，或者在网页上添加一段文本。就像你可以重新摆放家具，或者更换墙上的画作一样。
• BOM（浏览器对象模型） 则更像是房子本身以及与外界的交互。BOM让你能够控制房子的门窗（比如打开或关闭窗口），调整房子的灯光（比如全屏显示网页），或者了解房子的基本信息（比如浏览器的类型和版本）。BOM提供了与浏览器窗口交互的方法，比如获取浏览器的视窗大小，或者监听页面的加载和卸载事件。

简单来说，DOM让你操作网页内容和结构，就像在房子内部装修；而BOM让你与浏览器本身进行交互，就像在操作房子的门窗和了解房子的状态。两者共同协作，让你能够创建和控制丰富的网页体验。

​编辑

这里引用一位B站UP主的视频图片表明他们之间的关系（如有侵权联系作者删除），视频链接：
【JavaScript】什么是BOM、DOM？_哔哩哔哩_bilibili

总结

DOM（文档对象模型） ：

• 代表网页的结构和内容。
• 允许开发者访问和操作网页的元素，如标签、文本和属性。
• 包括创建、修改、删除元素和属性的能力。
• 可以添加事件监听器来响应用户交互。

BOM（浏览器对象模型） ：

• 代表浏览器窗口和导航功能。
• 包括DOM的所有功能，以及对浏览器窗口的控制，如大小调整、滚动和弹出窗口。
• 提供了与浏览器交互的方法，如获取浏览器信息、控制历史记录和全屏模式。
• 允许开发者在更广泛的层面上与用户进行交互，超越了网页内容本身。

总的来说，DOM专注于网页元素的操控，而BOM则提供了对整个浏览器环境的控制。两者共同为开发者提供了一整套工具，以创建动态、交互式的网页体验。

​