5.2 HTML 与 JavaScript 交互
5.2 HTML 与 JavaScript 交互
本节摘要：脚本与页面的全部交互都发生在文档树上——选取节点、监听事件、读写内容与结构，三件事构成最小集。本节讲三件事的标准接口、事件冒泡与委托机制、DOM 操作的性能意识，以及最重要的分工纪律：标记管结构、脚本管行为，让页面在无脚本时仍完整可读。
学习目标
阅读完本节，你应当能够：
- 熟练完成选取、监听、读写的最小交互闭环；
- 解释事件冒泡与捕获，用事件委托管理动态列表；
- 说明 innerHTML 与 textContent 的差异与安全边界；
- 用文档片段与批量更新控制 DOM 操作成本；
- 落实"渐进增强"的分工纪律，判断哪些逻辑属于脚本。
文档树是唯一接口
脚本对页面做的任何事，最终都是对文档树的操作。这与第 1 章的分层图完全对应：HTML 解析成 DOM 树，脚本在这棵树上工作。三件事的最小集：
选取——找到要操作的节点。两大主力接口：按选择器查（querySelector 取第一个、querySelectorAll 取全部，参数就是第 3 章学的 CSS 选择器——第 3 章的知识的又一次复用）与按关系查（closest 向上找最近祖先、parentElement 与 children 走亲缘）。
监听——在节点上等事件。addEventListener 是标准方式，三个参数：事件名、处理函数、可选配置。
读写——改内容、改结构、改属性与类。textContent 读写文本，setAttribute 改属性，classList 的增删切换管类名（第 3 章讲过：脚本切类名、样式在样式表，这是行为与表现协作的推荐姿势）。
<button id="like">点赞 <span id="count">0</span></button> <script> const btn = document.getElementById('like'); const count = document.getElementById('count'); let n = 0; btn.addEventListener('click', () => { n += 1; count.textContent = n; }); </script>
九行代码走完选取、监听、读写三件事，这就是交互的最小闭环。任何复杂交互都是这个闭环的组合叠加。
事件冒泡与委托
事件在树上的传播分三段：捕获（从根向下到达目标）、目标、冒泡（从目标回到根）。日常九成场景只关心目标与冒泡——而冒泡引出本节最重要的工程技巧：事件委托。
列表里一百个条目各需要一个点击响应，笨办法是绑一百个监听器；委托的办法是在列表容器上绑一个——点击任何条目，事件冒泡到容器，处理函数里再查目标是谁：
<ul id="menu"> <li data-page="home">首页</li> <li data-page="archive">归档</li> <li data-page="about">关于</li> </ul> <script> document.getElementById('menu').addEventListener('click', e => { const item = e.target.closest('li'); // 目标可能是 li 里的子节点，向上找 if (!item || !e.currentTarget.contains(item)) return; console.log('跳转:', item.dataset.page); // data-* 的读取，第1章埋的线 }); </script>
委托的两个收益都是结构性的：监听器数量与条目数解耦（一百个条目一个监听器），动态内容天然被覆盖（脚本后来添加的条目不需要重新绑事件——这对第 5.1 节的组件与任何动态列表都关键）。closest 向上查找时要判空与判归属（目标可能是容器自身的空白区），这是委托的标准防御写法。
读写的安全边界：innerHTML 与 textContent
写内容有两个接口，安全等级完全不同。textContent 写纯文本，任何字符都按文字显示——用户输入塞进来也是显示，不会执行。innerHTML 按 HTML 解析，塞进来的字符串里的标签会变成真节点——这就是 XSS 注入的入口：用户输入的脚本片段经 innerHTML 进树，页面就被注入了任意代码（第 5.4 节的完整攻防）。
// 用户输入: '<img src=x onerror=alert(1)>' el.textContent = input; // 安全：原样显示这串字符 el.innerHTML = input; // 危险：img 被解析，onerror 里的代码执行了
纪律一句话：插入不可信内容一律 textContent；innerHTML 只用于自己写死或已转义的模板。同样的道理适用于属性写入：setAttribute 时值就是字面量，不经 HTML 解析，比拼接 HTML 字符串安全。
DOM 操作的成本意识
文档树的每次结构改动都可能触发渲染流水线（重排与重绘），虽然现代浏览器已经高度优化，但两条例程值得养成：
批量进树。循环里逐个追加节点，每次追加都可能触发计算；先把节点装进文档片段，最后一次性挂树，计算合并。第 5.1 节的模板克隆配片段就是这个模式。
读写分组。交替"读布局信息、改结构"的循环（读一次高度、改一次样式，循环百次）会强迫浏览器每次重排，代价最大。解法：先把要读的一次读完存变量，再统一做修改。
// 慢模式：读改交替 items.forEach(el => { el.style.height = el.offsetHeight + 10 + 'px'; }); // 快模式：先读后写 const heights = items.map(el => el.offsetHeight); items.forEach((el, i) => { el.style.height = heights[i] + 10 + 'px'; });
先说明：这些优化在几十个元素规模时几乎无感，不要在小组件里过度雕琢；它们的价值出现在长列表、高频更新（动画、拖拽、实时数据）场景。性能意识的第一课是知道哪里可能有成本，第二课才是动手优化——乱优化比不优化更糟。
分工纪律：渐进增强
脚本与标记的分工原则贯穿全册，这里给出可操作的判据：页面在无脚本时应当仍然可读可用到什么程度。核心内容与导航必须不依赖脚本（读屏、爬虫、弱网环境都受益——第 4 章的老朋友再次到场）；脚本负责的是增强——校验前的前端提示、异步保存、动态筛选。这份纪律的工程名是渐进增强：基础层完备、增强层可选，与第 2 章多媒体降级、第 4 章 SEO 判据完全同构。
对应的三条负面清单：链接与导航不用伪链接（span 加 onclick，第 4 章双杀过它）；核心内容不靠脚本渲染（禁脚本后页面应仍有正文）；交互触发不依赖行内事件属性（onclick 写进标记把行为混入结构，统一 addEventListener 集中管理）。
<!-- 反面：行为混进标记，结构与行为纠缠 --> <button onclick="doSubmit()" class="btn">提交</button> <!-- 正面：标记只管结构，行为在脚本里集中挂载 --> <button id="submit-btn" class="btn" type="submit">提交</button> <script> document.getElementById('submit-btn').addEventListener('click', doSubmit); </script>
表单交互的专用通道
表单是交互最密集的区域，标准为它准备了一组专用接口，比通用接口省事且更正确。表单元素本身有一个集合属性直接访问全部控件，无需逐个查询；表单的提交事件统一在各元素上触发，不需要给每个提交按钮单独绑；控件值读写走 value 属性，勾选状态走 checked。一组高频接口对照：
<form id="order"> <label>杯型 <select name="size"> <option value="m">中杯</option> <option value="l">大杯</option> </select> </label> <label><input type="checkbox" name="extra-shot"> 加浓缩</label> <button>下单</button> </form> <script> const form = document.getElementById('order'); form.addEventListener('submit', e => { e.preventDefault(); // 拦截原生提交 const data = new FormData(form); // 一把抓全部控件的值 console.log('杯型:', data.get('size')); console.log('加浓缩:', data.get('extra-shot') !== null); }); </script>
FormData 构造函数扫一遍表单就收集全部命名控件的当前值，是"序列化表单"的标准答案——比逐个取值再拼对象省事，也天然跳过未勾选的复选框等细节。表单校验这边，第 2 章讲过的原生校验（required、pattern）在脚本侧有配套接口：checkValidity 触发整表校验并返回布尔值，reportValidity 同时把浏览器的提示气泡弹出来——自建校验 UI 之前先看看原生提示够不够用，又是"平台优先"的一次应用。
无障碍方面表单还有一条高频失误：用脚本动态改变控件的验证状态或禁用状态时，记得同步视觉反馈与播报。一个被脚本悄悄禁用的提交按钮，视觉若无变化，所有用户都会困惑"为什么点不动"——状态变化必须可见，这与第 4.2 节"不单靠颜色传达信息"是同一条纪律的两种表述。
事件目录：日常高频清单
选取、监听之外，值得有一张常用事件的速查表，按"谁触发"分三组记忆比按字母背高效。指针组：click（点击，键盘回车与空格在按钮上也触发 click，所以监听 click 即同时覆盖鼠标与键盘）、dblclick（双击，少用——移动端与可访问性都麻烦）。输入组：input（每次值变化，输入框实时反馈的主力）、change（值确定后，多用于下拉与复选）、submit（表单级，永远绑在 form 上而不是提交按钮上——覆盖回车提交的场景）、reset（重置）。焦点与键盘组：focus 与 blur（进出焦点，注意它们不冒泡，委托要用它们的捕获版本或用 focusin）、keydown（按键，快捷键实现的主力）。其他高频：scroll（滚动，配 passive）、load 与 DOMContentLoaded（资源与文档就绪——defer 脚本已免掉大半就绪监听的需求，第 5.3 节呼应）。
记忆之外是选择纪律：同一需求有多个候选事件时，选语义最贴切的那个而不是最顺手抓到的。实时搜索框用 input 而不是 keydown（前者是"值变了"，后者是"键按了"，输入法组合期间两者不同步——中文场景的经典坑）；表单提交一律 submit 而不是按钮 click（漏掉回车提交）。事件名是浏览器与你之间的契约词汇，用词精准，行为才精确。
一个输入法的坑值得单独记：中文输入过程中，输入框的值是"拼音串加候选状态"，input 事件高频触发但值尚未定稿。实时校验类逻辑要用输入法组合事件（compositionstart 与 compositionend）做状态标记，组合期间不校验——否则用户每敲一个拼音就报一次"格式错误"，体验灾难。
动手实验：一个可交互的待办清单
实验前最后强调一遍分工：下面这份清单的标记部分完全独立成立——标题、表单、列表都是纯 HTML，拔掉脚本它仍是一个能看的静态页。交互是长在结构上的增强，不是结构的前提。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交互实验</title> <style> .done { text-decoration: line-through; color: #999; } li { cursor: pointer; padding: 4px 0; } </style> </head> <body> <h1>待办</h1> <form id="add-form"> <input id="task-input" placeholder="输入新任务" required> <button>添加</button> </form> <ul id="list"></ul> <p id="stat"></p> <script> const form = document.getElementById('add-form'); const input = document.getElementById('task-input'); const list = document.getElementById('list'); const stat = document.getElementById('stat'); form.addEventListener('submit', e => { e.preventDefault(); // 拦截原生提交，走异步逻辑 const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.textContent = text; // 纯文本写入，安全 list.appendChild(li); input.value = ''; updateStat(); }); // 事件委托：一个监听器管所有条目，含未来新增的 list.addEventListener('click', e => { const li = e.target.closest('li'); if (li) { li.classList.toggle('done'); updateStat(); } }); function updateStat() { const total = list.children.length; const done = list.querySelectorAll('.done').length; stat.textContent = `共 ${total} 项，完成 ${done} 项`; stat.setAttribute('aria-live', 'polite'); // 读屏播报，第4章的线 } </script> </body> </html>
这份实验把本节全部知识装进一页：表单的 submit 拦截、textContent 安全写入、classList 切换状态、事件委托（新增条目自动可点）、aria-live 播报状态。动手改三处加深体会：把 textContent 换成 innerHTML 再输入尖括号内容，看注入风险现身；把委托监听器删掉，验证新增条目点击无效；给统计文本去掉 aria-live，体会读屏用户对状态变化的失明。
💡 关键直觉：把文档树想成一座剧场——HTML 搭好舞台与布景，脚本只是导演：它不该拆了布景重建（innerHTML 大改），而是指挥演员走位（切类名、改文本、移动节点）。导演换人了，戏台还在。
本节要点回顾
- 三件事最小集：querySelector 系选取、addEventListener 监听、textContent 与 classList 读写。
- 事件委托是结构性技巧：冒泡原理、一个监听器管全部、动态内容天然覆盖。
- 事件选择看语义：实时反馈用 input、确定值用 change、表单一律绑 submit；中文输入注意组合事件的坑。
- innerHTML 是危险接口：不可信内容一律 textContent，模板拼接要转义。
- 表单有专用通道：FormData 一把抓值、submit 绑在 form 上、原生校验接口配合自建提示。
- 成本意识两条例程：片段批量进树、读写分组，先测量再动手。
- 成本意识两条例程：片段批量进树、读写分组；先知道哪里有成本再谈优化。
- 渐进增强是纪律：核心内容不依赖脚本、行为集中在脚本、标记保持纯净。
最后补一条自学建议：本章的每个概念都能在开发者工具的控制台里三十秒验证——选中一个元素、改一次类名、监听一个事件，控制台是学交互最快的沙盒。养成"读到某个接口就打开控制台试一下"的习惯，比通读十篇教程更能把知识变成手感。交互知识的特殊性在于反馈即时：每行代码立刻在页面上可见，善用这个特性，学习曲线会陡得多。
下一节给交互加约束之一：快——性能优化的三大方向。