判断数据项“有变动”需基于旧值与新值比对，来源包括data-original-value属性、初始value/textContent快照或API响应diff；高亮优先用class="changed"而非内联style；须监听input事件、用MutationObserver处理动态节点、用classList.toggle避免抖动；服务端返回差异时直接渲染标签。
怎么判断哪些数据项“有变动”
关键不是看 HTML 渲染后长什么样，而是得有“旧值”和“新值”的比对依据。常见来源有三种：data-original-value 属性（服务端注入）、初始 value/textContent 快照（JS 初始化时存一份）、或前后两次 API 响应的 diff 结果。没有原始参照，所谓“变动”就是无源之水——别指望靠 DOM 当前状态反推变更。
用 class 还是 style 动态加高亮
优先用 class，比如 class="changed"，再配 CSS：.changed { background-color: #fff3cd; border-left: 3px solid #ffc107; }。好处是样式集中、可复用、支持 :hover/:focus 等伪类；内联 style 只适合极简临时调试，比如 element.style.backgroundColor = "#fff3cd"，但后续想统一改颜色就得遍历所有元素重设，维护成本高。
避免高亮污染和误触发
容易踩的坑集中在两处：
① 表单控件（input、select）内容变化时，change 事件只在失焦时触发，漏掉实时编辑；应监听 input 事件（textarea 和 contenteditable 同理）；
② 高亮逻辑若写在 DOMContentLoaded 里，会错过动态插入的节点——得用 MutationObserver 监听新增的 input 或 td 元素，并为它们补上初始快照和事件绑定；
③ 多次修改同一字段，反复加/删 changed 类会导致重排抖动，建议用 classList.toggle("changed", isModified) 一次到位。
服务端返回差异数据时怎么渲染
如果后端已返回结构化差异（如 {"name": {"old": "张三", "new": "张三丰", "changed": true}}），前端就别再做字符串比对：直接遍历字段，对 changed: true 的项，把 old 值用 <del></del> 包裹，new 值用 <ins></ins> 包裹，再统一加 class="diff" 控制样式。注意 <del></del> 和 <ins></ins> 是语义化标签，比纯 span 更利于无障碍访问，也省去手写删除线/下划线的 CSS。
立即学习“前端免费学习笔记（深入）”；
实际改动点常藏在属性快照、事件监听时机、DOM 动态性这三处，而不是高亮样式本身。
