面试题：什么是 DOM 和 BOM？

DOM 和 BOM 是 JavaScript 操作浏览器环境的两个核心概念，它们共同构成了 Web 前端开发的基础。

---

1. DOM (Document Object Model – 文档对象模型)

• 定义：DOM 是 HTML 或 XML 文档的编程接口。它将整个文档抽象为一个由节点（nodes）和对象（objects）组成的树状结构（也称为“节点树”或“对象树”）。通过 DOM，JavaScript 可以读取、修改、添加或删除文档的内容、结构和样式。
• 本质：一个与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。
• 作用范围：专注于当前加载的网页文档本身。
• 核心功能：
  • 查找元素：如 document.getElementById(), document.querySelector()。
  • 修改内容：如 element.textContent, element.innerHTML。
  • 修改属性：如 element.setAttribute(), element.id。
  • 修改样式：如 element.style.color, element.classList.add()。
  • 创建/删除/移动元素：如 document.createElement(), parent.appendChild(), element.remove()。
  • 事件处理：如 element.addEventListener('click', handler)。
• 示例：

// 获取一个按钮元素
  const button = document.getElementById('myButton');
  // 修改它的文本
  button.textContent = '点击我！';
  // 添加点击事件
  button.addEventListener('click', () => {
    alert('按钮被点击了！');
  });

---

2. BOM (Browser Object Model – 浏览器对象模型)

• 定义：BOM 提供了与浏览器窗口进行交互的对象和方法。它没有官方的标准，是浏览器厂商实现的一套 API。BOM 的核心是 window 对象，它是 JavaScript 在浏览器中的全局对象。
• 本质：一组用于控制浏览器行为和状态的对象集合。
• 作用范围：超越单个文档，涉及整个浏览器窗口、历史记录、屏幕信息、弹窗等。
• 核心对象和功能：
  • window: 全局对象，代表浏览器窗口。所有全局变量和函数都是 window 的属性/方法。
    • window.open(): 打开新窗口。
    • window.close(): 关闭窗口。
    • window.alert(), window.confirm(), window.prompt(): 显示弹窗。
    • window.setTimeout(), window.setInterval(): 设置定时器。
  • navigator: 提供有关浏览器的信息（如 navigator.userAgent, navigator.platform）。
  • location: 包含当前页面的 URL 信息，并允许导航到新页面。
    • location.href = 'https://example.com' (跳转)
    • location.reload() (刷新)
  • history: 操作浏览器的历史记录。
    • history.back() (后退)
    • history.forward() (前进)
    • history.go(-2) (后退两步)
  • screen: 提供有关用户屏幕的信息（如 screen.width, screen.height）。
  • frames / self: 访问框架（iframe）相关。
• 示例：

// 跳转到新页面
  location.href = 'https://www.google.com';
  // 弹出确认框
  if (confirm('确定要离开吗？')) {
    history.back(); // 用户点击“确定”则后退
  }
  // 获取屏幕宽度
  console.log(screen.width);

---

DOM 与 BOM 的关系

• 包含关系：window 对象是 BOM 的根对象，而 window.document 属性指向了 DOM 的根对象。也就是说，DOM 是 BOM 的一部分。
  • window -> BOM 的核心
  • window.document -> DOM 的入口点
• 依赖关系：在浏览器环境中，JavaScript 通过 BOM (window) 来访问和操作 DOM (document)。
• 层级图示：

window (BOM 核心)
  ├── document (DOM 入口)
  │   └── HTML 文档的节点树
  ├── navigator
  ├── location
  ├── history
  ├── screen
  ├── setTimeout, setInterval
  └── alert, confirm, prompt

---

总结

特性	DOM	BOM
全称	Document Object Model (文档对象模型)	Browser Object Model (浏览器对象模型)
核心对象	document	window
主要目的	操作当前网页文档的内容、结构和样式	操作浏览器窗口及其功能（导航、历史、弹窗等）
标准	有 W3C 标准	无统一标准，各浏览器实现可能略有差异
是否跨平台	是（也可用于 XML 解析）	否（仅限浏览器环境）
关键功能	查找、修改元素，事件处理	页面跳转、历史管理、定时器、弹窗、获取浏览器信息

简单来说：

• DOM 是你用来摆弄网页内容的工具箱（改文字、换图片、加按钮）。
• BOM 是你用来控制浏览器行为的遥控器（跳转页面、后退、弹窗、开新窗口）。