DOM 与事件

这一课你将能做到

1. 用 querySelector / getElementById 找到页面元素并改文本
2. 用 addEventListener 监听点击与表单提交，并正确使用 preventDefault
3. 解释事件委托的直观好处（父元素统一听），能读懂 closest 示例

为什么要学

控制台算数很爽，但用户点的是页面。
DOM（Document Object Model）人话：浏览器把 HTML 变成一棵可操作的树；JS 通过它改页面。
事件人话：点击、输入、提交时浏览器发出通知，你的函数去接。

不会 DOM，就无法把变量/数组/函数接到真实界面上。
后面的 React 会帮你「声明式」更新界面，但底层仍是这些概念。

先建立图像

HTML 标签  →  浏览器建成 DOM 树  →  JS 找到节点改它
点击按钮  →  触发 click 事件  →  你绑定的函数运行

document
  └─ html
       ├─ head
       └─ body
            ├─ button#btn
            └─ p#out

API	人话
getElementById	按 id 精确找一个
querySelector	按 CSS 选择器找第一个
querySelectorAll	找一堆，再循环
addEventListener	订阅某种事件
textContent	改纯文本（优先）

跟着做

步骤 1：查找与修改

<p id="tip">原始文字</p>
<script>
  // CSS 选择器语法：#tip 表示 id=tip
  const tip = document.querySelector("#tip");
  tip.textContent = "被 JS 改过了";
</script>

优先用 textContent 改文本；少用 innerHTML 拼用户输入（有 XSS 风险：恶意脚本被插入页面）。

步骤 2：监听点击，维护计数状态

<button type="button" id="btn">+1</button>
<span id="n">0</span>
<script>
  let count = 0;
  const n = document.getElementById("n");
  document.getElementById("btn").addEventListener("click", function () {
    count = count + 1;          // 先改数据
    n.textContent = String(count); // 再更新界面
  });
</script>

你应看到每次点击数字加一。模式仍是：状态在变量里，DOM 是投影。

步骤 3：表单提交不要整页刷新

<form id="f">
  <label>留言 <input name="msg" required /></label>
  <button type="submit">发送</button>
</form>
<p id="out"></p>
<script>
  document.getElementById("f").addEventListener("submit", function (e) {
    e.preventDefault(); // 阻止默认「提交刷新」
    const fd = new FormData(e.target);
    const msg = String(fd.get("msg") || "").trim();
    const out = document.getElementById("out");
    if (!msg) {
      out.textContent = "留言不能为空";
      return;
    }
    out.textContent = "你说：" + msg;
  });
</script>