DOM 简介
DOM（Document Object Model，文档对象模型）是浏览器把 HTML 页面解析成的一棵"节点树"，并提供一套 API 让 JavaScript 读取和修改页面。为什么要学？因为没有 DOM，JavaScript 就无法操作网页——改文字、换图片、响应点击全靠它，它是"JS 让网页动起来"的桥梁。
什么是 DOM
W3C 标准把 HTML 文档组织成一棵树，每个标签、属性、文本都是一个"节点"（Node）。浏览器暴露全局对象 document 指向整棵树：
html
└─ body
├─ h1 （标题元素节点）
└─ p id="intro"（元素节点，内含文本节点）
DOM 能做什么
- 修改页面内容：innerHTML、textContent。
- 修改样式与属性：style、className、src 等。
- 增删节点：createElement、appendChild、remove。
- 绑定事件：点击、按键、鼠标移动。
- 读取用户输入：表单控件的 value。
一个最小示例
<!DOCTYPE html>
<html>
<body>
<p id="demo">旧文字</p>
<button onclick="change()">点我</button>
<script>
function change() {
// 1. 按 id 找到元素 2. 改写它的内容
document.getElementById("demo").innerHTML = "新文字";
}
</script>
</body>
</html>
页面初始显示"旧文字"，点击按钮后变成"新文字"（结果直接呈现在页面上）。
常用术语
- document：整个文档的入口对象，几乎一切 DOM 操作都从它开始。
- 元素（Element）：一个标签对应一个元素节点，如
<p>、<div>。 - 节点（Node）：比元素更宽泛，还包括文本、注释等节点。
- window：浏览器窗口对象，document 是它的一个属性。
DOM 标准的演进
早期各家浏览器 DOM 实现不一致，程序员被迫写大量"兼容代码"；后来由 W3C 统一标准，现代浏览器支持高度一致。学习时以标准 API（getElementById、querySelector 等）为准即可。
小结
DOM 是浏览器提供的"页面编程接口"：HTML 被解析成节点树，document 是入口，JavaScript 通过它读取和修改页面。下一节我们开始用 DOM 操作 HTML 内容与属性。