在 Web 开发中，DOM 和 BOM 是两个最基础、最重要的概念。它们是 JavaScript 能够操作网页内容和与浏览器交互的基石。
✅ 一句话总结
DOM（文档对象模型） 是将 HTML 文档结构化为对象，用于操作网页内容；BOM（浏览器对象模型） 是将浏览器功能抽象为对象，用于与浏览器进行交互。
window对象是 BOM 的核心，同时也是 JavaScript 的全局对象。
✅ 一、DOM：文档对象模型（Document Object Model）
🔹 定义：
DOM（Document Object Model）是 HTML 和 XML 文档的编程接口。它将整个页面映射为一个层次化的节点树，每个节点都是一个对象，可以通过 JavaScript 进行访问和操作。
🔹 核心思想：
- 将 HTML 文档视为一个对象树；
- 每个 HTML 标签、文本、属性都对应一个节点对象；
- 提供 API（方法和属性）来增删改查这些节点；
🔹 主要功能：
| 功能 | 示例方法 |
|---|---|
| 查找元素 | document.getElementById()、querySelector() |
| 创建元素 | document.createElement() |
| 修改内容 | element.innerHTML、textContent |
| 操作属性 | element.setAttribute()、getAttribute() |
| 事件处理 | element.addEventListener() |
| 样式控制 | element.style.color、classList |
🔹 示例：
// 修改页面标题
document.title = "新标题";
// 获取元素并修改内容
const heading = document.querySelector("h1");
heading.textContent = "Hello, DOM!";
✅ 二、BOM：浏览器对象模型（Browser Object Model）
🔹 定义：
BOM（Browser Object Model）是 浏览器提供的用于与浏览器窗口进行交互的 API 集合。它没有官方标准，但被所有浏览器实现。
🔹 核心对象：window
window 是 BOM 的核心对象，具有双重身份：
- 浏览器窗口的全局接口：代表浏览器窗口；
- JavaScript 的全局对象：所有全局变量、函数都属于
window；
var globalVar = "I'm global";
function globalFunc() { return "Hello"; }
console.log(window.globalVar); // "I'm global"
console.log(window.globalFunc()); // "Hello"
🔹 BOM 的主要子对象
| 对象 | 作用 |
|---|---|
window | 全局对象，窗口本身 |
document | DOM 的入口，操作页面内容 |
location | 管理 URL，实现跳转、刷新 |
navigator | 获取浏览器信息（用户代理、语言等） |
screen | 获取屏幕信息（分辨率、颜色深度） |
history | 管理浏览历史（前进、后退） |
localStorage / sessionStorage | 本地数据存储 |
console | 控制台输出 |
alert() / confirm() / prompt() | 弹窗交互 |
🔹 示例：
// 跳转页面
window.location.href = "https://example.com";
// 获取浏览器信息
console.log(navigator.userAgent);
// 前进一页
history.forward();
// 弹出确认框
const isConfirmed = confirm("确定要删除吗？");
✅ 三、DOM 与 BOM 的关系图
+-----------------+
| window | ← BOM 核心（全局对象）
+-----------------+
| | |
| | +------------------+
| | |
| +------------+ |
| | |
+-------------+ +--------------+ |
| document | | location | | ... 其他 BOM 对象
+-------------+ +--------------+ |
| |
| |
+--------------+ |
| DOM Tree | ← HTML 文档结构化 |
+--------------+ |
|
+------------------+
| navigator |
+------------------+
✅ 关键点：
document对象既是 DOM 的入口，也是window对象的属性，体现了 DOM 与 BOM 的紧密联系。
✅ 四、一句话总结
DOM 是操作网页内容的模型，BOM 是操作浏览器功能的模型。
window是 BOM 的核心，也是 JavaScript 的全局对象，它包含了document、location、navigator等关键对象，是前端开发与浏览器交互的桥梁。
💡 进阶建议
- 所有未使用
var/let/const声明的变量都会自动成为window的属性； - 避免污染全局命名空间，使用模块化或 IIFE；
window对象的方法（如alert、setTimeout）可以直接调用；- 在 Node.js 环境中，没有
window对象，但有类似的全局对象global； - 使用
this在全局作用域中指向window（非严格模式）；
