Document Object Model
DOM 全拼
Document Object Model
中文译名：文档对象模型
──────────────────
一、它到底是什么？
- 官方定义
W3C 标准：DOM 是「一种与语言无关、与平台无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式」。 - 大白话
浏览器把拿到的 HTML/CSS 文本先解析成一棵「内存树」，然后给 JavaScript 暴露出一组 API（属性和方法），让 JS 可以：
• 查：找到某个节点（getElementById、querySelector…）
• 改：改文本、属性、样式
• 增删：插入/删除节点
• 监听：响应事件
这棵树 + 这套 API 就是 DOM。
──────────────────
二、为什么叫「文档对象模型」
- Document：浏览器里的整份 HTML 文档。
- Object：把每个标签、文本、注释都抽象成一个对象，有属性（
nodeName、className、style…）和方法（appendChild、addEventListener…）。 - Model：树形结构的「模型」，父子、兄弟关系一目了然。
──────────────────
三、DOM 树长什么样
<!doctype html>
<html><head><title>Demo</title></head><body><h1 id="title">Hello</h1><p>World</p></body>
</html>
在内存里会被解析成：
document└─ html├─ head│ └─ title│ └─ text: "Demo"└─ body├─ h1#title│ └─ text: "Hello"└─ p└─ text: "World"
──────────────────
四、核心接口速查（浏览器实现的全局构造函数）
| 接口 | 作用示例 |
|---|---|
Document | 整棵树入口：document.title, document.createElement() |
Element | 对应标签节点：el.classList.add(), el.getAttribute() |
Text | 文本节点：textNode.nodeValue = '新内容' |
Node | 所有节点共同父类：node.parentNode, node.childNodes |
EventTarget | 事件系统根类：el.addEventListener('click', fn) |
──────────────────
五、DOM 不是 HTML
- HTML：文本字符串（磁盘或网络传来的源码）。
- DOM：解析后的内存对象树，可以被脚本实时修改；HTML 源文件不会因此自动变化。
（打开 DevTools → Elements 面板看到的是 DOM 树，不是原始源码。）
──────────────────
六、DOM 级别与兼容性
- DOM Level 0：早期浏览器私有集合（
document.forms,document.images…） - DOM Level 1/2/3/4：W3C 逐步标准化（
getElementById,addEventListener, 事件流, MutationObserver…） - 现在统称「Living DOM」，WHATWG 持续更新。
──────────────────
七、与其他概念区分
- BOM（Browser Object Model）：
window、navigator、location… 与浏览器窗口本身相关的对象集合。 - Virtual DOM：React/Vue 等在 JS 内存中维护的轻量树，用来减少直接操作真实 DOM 带来的性能损耗。
──────────────────
八、常用代码片段
// 查
const title = document.querySelector('#title');// 改
title.textContent = 'Hi, DOM!';
title.style.color = 'red';// 增
const span = document.createElement('span');
span.textContent = '!';
title.appendChild(span);// 删
title.removeChild(span);
──────────────────
一句话总结
DOM 就是浏览器把 HTML 变成一棵可编程的树，并给 JavaScript 提供一套标准化 API，让我们能「用代码改写页面」。