实战优先，聚焦DOM查询、节点操作、事件委托、表单处理四大模块：用querySelector替代老旧API，textContent防XSS，DocumentFragment批量插入，事件委托提升性能，表单通过input监听与submit拦截实现闭环。
直接上手练，边查边改边验证，别光看理论。重点不是记住所有 API 名字，而是清楚“要改什么、在哪改、怎么改不翻车”。下面按实战逻辑拆解四个核心模块，每块都聚焦高频动作和易错点。
DOM 查询：用对方法，少踩兼容坑
现代项目优先用 querySelector 和 querySelectorAll，写法统一、支持复杂选择器、返回静态 NodeList（可直接 forEach）。旧方法如 getElementsByClassName 返回的是动态 HTMLCollection，遍历时删元素容易漏掉或报错。
- ID 唯一且稳定 → 用
getElementById，性能最快 - 批量选同类结构（比如所有 .item）→ 用
querySelectorAll('.item') - 找父级/兄弟/子级节点 → 别硬写循环，直接用
parentElement、nextElementSibling、children（只含元素节点，不含空格文本） - 注意
childNodes和children的区别：前者包含文本节点（哪怕只是换行缩进），后者只返回元素节点
节点操作：内容、结构、样式分清边界
改内容用 textContent（安全、快、防 XSS），插 HTML 用 innerHTML（要自己确保内容可信）；改结构优先用 DocumentFragment 批量插入，避免反复重排重绘。
- 新增节点：先
createElement，再设内容（textContent或innerHTML），最后用appendChild或insertBefore - 删节点：必须调用父节点的
removeChild，不能直接node.remove()（虽可用但部分老环境不支持） - 改样式：优先操作
classList（add/remove/toggle），比拼字符串className更可靠；内联样式用style.xxx，但建议通过加 class 控制 - 属性操作：标准属性（
src、href、value）直接点取；自定义属性（data-xxx）用dataset.xxx或getAttribute/setAttribute
事件委托：一个监听器管一片
本质是利用事件冒泡，在父容器上监听，再用 event.target 判断真正触发的子元素。适合动态增删的列表、按钮组等场景，避免给每个子项单独绑定事件。
- 绑定位置：选稳定存在的父级（比如
<ul id="list"></ul>），不要绑在可能被删的节点上 - 判断目标：用
event.target.matches('button.delete')或event.target.classList.contains('delete')，别直接靠 tagName 硬判 - 注意 this 指向：箭头函数里没有 this，需用
event.currentTarget拿到绑定监听器的那个父元素 - 表单提交、链接跳转等默认行为记得
event.preventDefault()，否则页面刷新或跳走
表单处理：值、校验、提交三步闭环
表单交互的核心是控制 value、监听 input 或 change、拦截 submit 事件做校验。
- 获取值：文本框、下拉框、单选/复选框统一用
element.value；多选下拉框需遍历options取selected项 - 实时响应：监听
input事件（比change更及时），但注意防抖，避免高频触发 - 提交拦截：给
<form></form>绑submit事件，event.preventDefault()阻止跳转，再手动收集数据、校验、发请求 - 禁用/重置：用
form.reset()清空，用element.disabled = true禁用控件，别只靠样式隐藏
