前端面试题：什么是 DOM 和 BOM？

简单解释

DOM 指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。
BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。

• DOM的核心是document，它表示整个文档，包括文档的根元素、文本节点、注释、标签等。通过 document 对象，开发者可以访问和操作文档中的每个元素和属性，以及它们之间的关系。
• BOM的核心是window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。
• window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

---

进一步的解释

DOM（Document Object Model）指的是文档对象模型，是一种用于表示 HTML、XML 等文档结构的标准编程接口。

• DOM将文档表示为具有层次结构的节点树，每个节点都表示文档中的一个元素、属性、文本或者注释，开发者可以使用JavaScript来访问和修改文档的内容、结构和样式，例如添加、删除、修改元素、属性，修改样式，响应用户事件等。
• DOM 的核心对象是 document 对象，document对象提供了很多属性和方法，例如getElementById()、getElementsByTagName()、createElement()等，开发者可以使用这些方法来获取、创建、修改文档中的元素和内容。除此之外，document对象还提供了事件处理程序、CSS样式等相关的方法和属性，使得开发者能够对文档进行更加灵活和丰富的操作。

---

BOM（Browser Object Model）指的是浏览器对象模型，是浏览器提供的一组JavaScript对象和API，用于操作浏览器窗口、文档、历史记录等。

• BOM包括多个对象，例如window对象、document对象、location对象、history对象、navigator对象等。
• 其中，window对象是BOM的核心对象，它代表了浏览器窗口，提供了很多方法和属性，例如打开新窗口、关闭窗口、设置窗口大小、获取窗口位置等。
• document对象表示当前窗口中的文档，提供了操作文档内容、样式、结构等的方法和属性。
• location对象表示当前窗口中加载的文档的URL，提供了获取和设置URL的方法和属性。
• history对象表示当前窗口中的浏览历史记录，提供了前进、后退、跳转等操作的方法。
• BOM的具体实现因浏览器而异，不同的浏览器可能提供不同的API或者实现方式。因此，在编写跨浏览器的JavaScript代码时，需要注意BOM的差异性。

---

DOM 和 BOM 的区别:

1. DOM 是用于操作文档对象的 API，而 BOM 是用于操作浏览器窗口和页面的 API。
2. DOM 的主要作用是访问和操作页面的结构和内容，比如获取元素、修改元素属性、添加元素等。BOM 的主要作用是访问和操作浏览器窗口和页面，比如获取浏览器窗口大小、打开新窗口、跳转页面等。
3. 在实际开发中，DOM 和 BOM 经常被结合使用，比如使用 DOM 操作页面元素的样式和内容，同时使用 BOM 控制浏览器的行为和属性。