实战优先，聚焦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 批量插入，避免反复重排重绘。

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• 新增节点：先 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 判断真正触发的子元素。适合动态增删的列表、按钮组等场景，避免给每个子项单独绑定事件。

• 绑定位置：选稳定存在的父级（比如
  ），不要绑在可能被删的节点上
• 判断目标：用 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 更及时），但注意防抖，避免高频触发
• 提交拦截：给
  绑 submit 事件，event.preventDefault() 阻止跳转，再手动收集数据、校验、发请求
• 禁用/重置：用 form.reset() 清空，用 element.disabled = true 禁用控件，别只靠样式隐藏