module 05 · javascript dom 与交互 · 第 33–38 课
目标一句话：让页面「动起来」—— 找到元素、响应操作、管好数据，做出真实可用的交互应用。
// module 05
// 模块五 · 第 33 课
document.querySelector / querySelectorAlltextContent / innerText / innerHTML 的区别与风险getAttribute / setAttribute / dataset用 JS 读取并修改页面上 5 个元素：改标题文字、改图片 src、改链接 href、给卡片加一个 data 属性、批量把所有列表项加上序号前缀。
验收：能用 querySelector 选中带类名和带 id 的元素；知道 querySelectorAll 返回的不是数组。
// 模块五 · 第 34 课
addEventListener(类型, 回调)event.target / value / key · preventDefault()① 输入框实时字数统计；② 表单提交时阻止默认跳转并校验必填项、给错误提示；③ 用事件委托给一个列表的所有项（含后来新增的项）绑定点击。
验收：能解释为什么循环绑定事件不如委托一次；提交后页面不刷新。
// 模块五 · 第 35 课
element.style.xxx 与 CSS 属性名的驼峰转换classList.add / remove / toggle / contains（推荐用法）dataset 读写 data-* · JS 设置 CSS 变量（setProperty）getComputedStyle 读取最终样式 · 配合 transition 做过渡① 实现「暗黑模式切换」按钮：切换 <body> 上的类名 + 用 CSS 变量换色；② 做一组标签，点击切换选中态（只允许一个选中）。
验收：样式写在 CSS 里，JS 只负责切类名；切换主题后刷新页面样式仍正确。
核心原则：JS 只负责「切类名」，样式规则留在 CSS 里。
// 模块五 · 第 36 课
createElement / append / insertBefore / removetrim() 去空格实现「动态留言板」：输入 → 添加 → 删除；空输入拒绝提交，超过 100 字提示，新留言出现在列表最前面。
验收：新元素确实插入了 DOM（不是只创建了对象）；重复提交不会重复绑事件。
// 模块五 · 第 37 课
localStorage.setItem / getItem / removeItem 与 JSON 配合filter + includes）给第 36 课的留言板加两个能力：① 刷新页面数据还在（localStorage）；② 顶部搜索框能按关键词筛选留言。
验收：存的是字符串不是对象；刷新后列表与计数一致；搜索时删除功能仍正常。
// 模块五 · 第 38 课 · 阶段实战
这个应用可以作为结课作品的「作品展示」区块——它足够小，也足够完整。
// module 05 · summary
todo.html —— 完整可用的待办应用render() 渲染函数这个应用足够小，也足够完整 —— 可以直接放进结课作品的「作品展示」区块。