DOM与BOM

一 DOM的概念

1.1 什么是DOM

DOM代表文档对象模型(Document Object Model)，它是一种将HTML，XML和SVG文档表示为具有层次结构的节点树的API（应用程序接口）。使用DOM，开发人员可以使用JavaScript等编程语言来访问和修改文档的内容，结构和样式。DOM将文档视为一个由节点组成的树形结构，在这个结构中，每个节点都是文档中的一个元素、属性或文本。开发人员可以通过DOM API来访问和修改这些节点，以实现在文档上动态操作和交互。

1.1.1 虚拟DOM与真实DOM的区别

虚拟DOM和真实DOM都是指文档对象模型（DOM），但实现方式不同，其区别如下：

1. 渲染方式不同

真实DOM是由浏览器渲染的，它是由网页中所有元素组成的完整树形结构，每次修改都会导致页面重新渲染，消耗性能。

虚拟DOM是通过JavaScript模拟的一个DOM，它只是一种轻量级的JavaScript对象，对它的操作不会直接影响到真实DOM，只有在发生实际变化时才会重新渲染整个DOM树，从而节省了渲染的开销。

2. 更新方式不同

真实DOM的更新是直接操作DOM，页面会重新渲染，会导致页面抖动和效率低下。

虚拟DOM采用“先操作虚拟DOM，再将虚拟DOM转换成真实DOM”这种方式来更新视图，只有最终结果需要重新渲染，从而减少了页面重新渲染的次数，提高了渲染效率。

3. 性能差异

由于真实DOM需要频繁地重新渲染整个页面，操作DOM也较为耗时，因此性能较差。

虚拟DOM能够通过比较新旧虚拟DOM的差异，局部更新页面，减少页面重新渲染的次数，从而提高性能。

1.1.2  虚拟DOM与真实DOM的应用场景

虚拟DOM和真实DOM各有优缺点，应用场合有所不同。

虚拟DOM适用于需要频繁更新页面的应用，例如单页应用（SPA），它能够通过比较新旧虚拟DOM的差异，只更新变化的部分，减少页面重新渲染的次数，提高性能。虚拟DOM也可以在跨平台开发中应用，例如React Native这种可以将JavaScript代码编译成原生应用代码的框架。

真实DOM适用于较为简单的应用，例如静态页面展示等，由于DOM节点数量较少，不需要频繁操作DOM，因此使用真实DOM会更为简单和高效。同时，真实DOM也不需要额外的库或框架支持，可以直接使用原生JavaScript操作DOM。

综上所述，虚拟DOM适用于需要频繁更新的复杂应用场景，真实DOM适用于简单应用或不需要频繁更新的场景。

二 BOM的概念

2.1 什么是BOM

BOM（Browser Object Model，浏览器对象模型）指的是浏览器提供的一组JavaScript API，用于操作浏览器窗口、浏览器历史记录、定时器、浏览器位置、浏览器屏幕等相关信息。BOM的主要作用是通过JavaScript来访问和操作浏览器窗口和页面，从而对浏览器的行为进行控制。

BOM由以下几个核心对象组成：

• Window 对象：表示当前打开的浏览器窗口或标签页，是BOM的核心对象，可以通过它访问其他BOM对象和DOM对象。
• Navigator 对象：提供了关于浏览器的信息，例如浏览器名称、版本和操作系统信息等。
• Screen 对象：提供了关于用户屏幕的信息，例如屏幕的宽度和高度等。
• History 对象：提供了浏览器窗口中的历史记录，以及对历史记录的操作方法。
• Location 对象：提供了当前页面的URL信息，以及对URL的操作方法。

通过BOM提供的API，可以实现许多常见的浏览器操作，例如弹出窗口、刷新页面、重定向页面等。BOM也是开发现代Web应用的重要基础组成部分之一。

2.1.1什么是API

API（Application Programming Interface，应用程序编程接口）是一组定义了软件组件之间如何进行交互的规范。简单来说，API就是一些已经编写好的程序代码，用于提供给其他开发者使用，以方便他们完成特定的功能或完成特定的任务。API封装了底层代码的实现细节，可以通过调用API中提供的方法或函数来实现所需的功能，避免了开发者重新编写底层代码的麻烦和风险。

API通常分为两种类型：内部API和外部API。内部API是针对特定软件或应用程序的私有接口，由开发者自己开发和维护，主要用于不同组件或模块之间的通信和交互。外部API则是针对外界应用程序和开发者们的公共接口，由软件、平台或服务提供商提供，以便其他开发者能够轻松地访问和使用这些服务。

常见的API包括操作系统API、网络API、Web API、第三方API等。例如，JavaScript提供的浏览器端Web API就包括DOM API、BOM API、Canvas API、XMLHttpRequest API等，用于实现Web应用程序的各种交互和功能。

2.2 BOM应用场景

BOM（浏览器对象模型）是JavaScript中用于操作浏览器窗口及其内容的一组API，其应用场景主要包括以下几个方面：

• 浏览器窗口控制：可以使用BOM API创建、打开、关闭、移动、缩放浏览器窗口，以及设置浏览器窗口的大小、位置等属性。
• 浏览器导航控制：可以使用BOM API控制浏览器的后退、前进、刷新、停止等操作，以及获取当前页面的URL、标题和浏览历史等信息。
• 浏览器屏幕控制：可以使用BOM API获取浏览器屏幕的宽度、高度、颜色深度等属性，并调整浏览器窗口的大小以适应不同的屏幕尺寸。
• 客户端存储：可以使用BOM API实现客户端存储功能，包括Cookie、localStorage、sessionStorage等。
• 弹出框控制：可以使用BOM API实现弹出框的显示、隐藏、位置、大小等属性的控制，以及获取用户的输入信息。

总之，BOM是JavaScript中非常重要的一个部分，通过BOM API，我们可以控制和操作浏览器窗口及其内容，实现各种丰富的Web应用程序。