JS中BOM和DOM的区别

在JavaScript中，BOM（浏览器对象模型）和DOM（文档对象模型）是两个核心的API，它们分别关注不同的浏览器功能。

以下是BOM和DOM之间的主要区别：

1. 定义和职责：

   • DOM（文档对象模型）：DOM 是一个用于操作HTML和XML文档的编程接口，它将文档表示为一个由节点组成的树形结构。DOM 允许JavaScript访问和修改文档的结构、样式和内容。
   • BOM（浏览器对象模型）：BOM 是用于操作浏览器窗口及其内容的API，它提供了与浏览器交互的方法和接口，包括窗口大小、位置、浏览器历史记录、定时器等。

2. 核心对象：

   • DOM 的核心对象是 document，它代表了整个HTML文档，允许访问和修改文档中的元素、样式和内容。
   • BOM 的核心对象是 window，它代表了整个浏览器窗口，包括浏览器的菜单栏、工具栏、地址栏等。

3. 交互内容：

   • DOM 主要关注文档内部的结构和内容，允许开发者通过JavaScript动态地修改HTML元素和CSS样式。
   • BOM 主要关注浏览器窗口本身，允许开发者操作窗口的大小、位置、打开和关闭新窗口、导航历史等。

4. 方法和属性：

   • DOM 提供了诸如 getElementById、getElementsByClassName、querySelector 等方法来选择和操作文档中的元素。
   • BOM 提供了如 window.open、window.close、window.moveTo、window.resizeTo 等方法来操作浏览器窗口。

5. 兼容性：

   • DOM 是一个标准化的API，它在不同的浏览器和平台上具有较好的兼容性。
   • BOM 的某些部分，尤其是涉及浏览器窗口和导航的部分，可能在不同浏览器之间有所差异。

6. 历史：

   • DOM 最初是在1998年被W3C标准化，随后成为了Web开发的核心技术之一。
   • BOM 作为一个非标准化的概念，其历史更早，但后来也随着Web标准的演进逐渐形成了更明确的规范。

总之，DOM和BOM虽然都是JavaScript的组成部分，但它们关注和操作的内容不同，DOM更侧重于文档内部的结构和内容，而BOM更侧重于浏览器窗口和与浏览器交互的方法。