一、基础概念区分

BOM

定义浏览器提供的、用来操作浏览器窗口本身的 API。主要宿主是 window脱离 HTML 文档，只管浏览器窗口。

• 主要对象的观点是，window
• 常用成员这方面，
  • 再看窗口控制，window.open / close / resize
  • 地址跳转与获取：location
  • 至于历史记录。history
  • 从设备信息来看，navigator
  • 弹窗、定时器：alert / setTimeout / setInterval
• 特点：和页面 DOM 节点无关，只操控浏览器外壳。

DOM

定义浏览器把 HTML 文档解析为树形 JS 对象把标签、文本、属性抽象成节点树，提供 API 用来操作页面标签内容。

• 至于根对象。document
• 从结构来看，DOM 树 = 根节点 → 元素节点、文本节点、属性节点、注释节点…
• 主要作用：页面结构、内容、样式的增删改查。

DOM 操作概览

所有通过 DOM API 修改页面节点的行为统称为「DOM 操作」。

1. 查询：#getElementById,#querySelector,#children,#parentNode
2. 增删：#createElement。#appendChild,#removeChild
@@@

原生 DOM 痛点 ⚠️

- 高频 DOM 操作会导致"重排" 与 "重绘"`，渲染开销大导致页面卡顿。- 手动维护大量 querySelector / appendChild 等代码极易出错且难以维护。- Vue/React 的出现正是为了解决这些痛点。让开发者只关注业务数据，而不是繁琐的 DOM 操作。

二、DOM / BOM / DOM 操作 简单对比

三、Vue 响应式程序里 DOM/BOM/DOM 操作 的关联与运用

主要目标： 根据数据调整视图——即「数据变化 → 自动执行 DOM 操作更新页面」，从此告别手写 `appendChild` / `querySelector` 等繁琐代码。