DOM（文档对象模型）是 JS 与 HTML 对话的方式。但是操作 DOM 很慢。知道如何高效地操作它是高级技能。
互动游乐场
<div id="parent" style="padding: 20px; background: #eee;">
父 Div
<button id="child">点我 (子)</button>
</div>
<p id="log">日志:</p>事件冒泡 (香槟塔)
当你点击 div 内的按钮时，你实际上是点击了 两者。
事件像水中的气泡一样“向上冒泡”：按钮 → Div → Body → HTML。
专业模式 (事件委托)： 不要给 100 个列表项添加 100 个监听器，而是给父列表 (UL) 添加 1 个监听器。它会捕获所有子项的点击。
选择元素
javascript
// 现代且灵活
const btn = document.querySelector(".submit-btn");
const allItems = document.querySelectorAll("li");
// 老派 (更快，但更具体)
const header = document.getElementById("header");修改 DOM
javascript
const box = document.createElement("div");
box.classList.add("alert-box");
box.textContent = "错误已保存！";
document.body.appendChild(box);