前言

DOM（文档对象模型）和BOM（浏览器对象模型）是Web开发中常用的两种模型。在日常浏览器端开发中，我们会经常使用到他们。

什么是DOM、BOM

DOM主要组成部分：

• 文档对象（Document Object）：表示整个文档，是DOM的顶层对象。通过document对象可以访问和操作整个文档结构，包括文档元素、样式、事件等。
• 元素节点（Element Nodes）：表示HTML文档中的元素，如<div>、<p>、<span>等。每个元素节点都可以有子节点和属性。
• 属性节点（Attribute Nodes）：表示HTML元素的属性，如id、class、src等。属性节点属于元素节点的一部分。
• 文本节点（Text Nodes）：表示HTML文档中的文本内容，如元素内部的纯文本。文本节点是元素节点的子节点。
• 注释节点（Comment Nodes）：表示HTML文档中的注释内容，如<!-- 这是一个注释 -->。注释节点也是元素节点的一种。
• 文档碎片（Document Fragments）：用于临时存储一组节点，以便一次性插入文档中，减少页面重绘次数。

这些组成部分一起构成了DOM树，即文档对象模型树。DOM树以document对象为根节点，通过各个节点之间的父子关系形成了整个文档的层次结构。通过操作这些节点和属性，开发人员可以动态地修改页面内容、样式和行为，实现丰富的交互效果。

BOM主要组成部分：

• Window对象：window对象是BOM的核心对象，代表浏览器窗口或标签页。它包含了很多属性和方法，用于操作浏览器窗口、处理事件、管理浏览器历史记录等。
• Navigator对象：navigator对象包含了关于浏览器的信息，如浏览器的名称、版本、用户代理字符串等。开发人员可以使用navigator对象来编写特定于浏览器的代码。
• Location对象：location对象表示当前文档的URL信息，包括页面的URL、协议、主机、路径等。通过location对象，可以获取和设置当前页面的URL信息。
• History对象：history对象允许对浏览器的历史记录进行操作，包括前进、后退、刷新页面等。通过history对象，开发人员可以实现页面导航和历史记录管理。
• Screen对象：screen对象包含有关用户屏幕的信息，如屏幕宽度、高度、像素深度等。通过screen对象，可以获取有关用户屏幕的信息，以便进行响应性设计。
• Cookie对象：document.cookie属性用于操作和管理浏览器的Cookie，包括设置、获取、删除Cookie等操作。Cookie在Web开发中常用于存储和传递用户信息。
• 弹窗对象：BOM提供了alert()、confirm()、prompt()等方法，用于在浏览器中显示不同类型的弹窗，与用户进行交互。

这些组成部分一起构成了BOM，用于操作浏览器窗口和提供与浏览器相关的功能。开发人员可以利用BOM提供的方法和属性来实现各种浏览器交互和功能。

DOM和BOM区别

用途不同：

• DOM主要用于操作文档内容和结构，允许开发人员通过JavaScript访问和修改网页的各个元素。
• BOM主要用于操作浏览器窗口和提供与浏览器相关的功能，如处理浏览器历史记录、管理Cookie、显示弹窗等。

对象结构不同：

• DOM以document对象为根节点，表示整个文档结构，包括元素节点、属性节点、文本节点等。
• BOM以window对象为核心，包含了navigator、location、history、screen等对象，用于操作浏览器窗口和提供浏览器功能。

操作范围不同：

• DOM操作的是HTML或XML文档的内容和结构，可以对文档进行增删改查，实现动态页面效果。
• BOM操作的是浏览器窗口的功能和属性，可以控制浏览器的行为、页面导航以及与用户交互的功能。

兼容性不同：

• DOM在不同浏览器中有着较好的一致性，因为它是W3C标准规定的文档对象模型。
• BOM在不同浏览器中的实现有一定差异，因为浏览器厂商可以根据自己的需求和特性来实现BOM的功能。 总的来说，DOM用于操作文档内容和结构，而BOM用于操作浏览器窗口和提供与浏览器相关的功能。在Web开发中，开发人员经常需要同时使用DOM和BOM来实现网页的交互和功能。

总结

JavaScript通过访问BOM（Browser Object Model）对象来控制、修改客户端（浏览器）。BOM的核心对象是window，其中包含了document，因此可以直接访问document属性。通过document属性，可以操作XHTML文档的内容和结构，因为document对象是DOM（Document Object Model）模型的根节点。简而言之，BOM包含了DOM对象，通过BOM对象访问到DOM对象，JavaScript可以操作浏览器和文档内容。这种架构使得JavaScript可以直接与浏览器交互并修改文档内容。