domtokenlist.replace()用于原子替换类名，chrome 61+、firefox 63+、safari 12.1+支持，ie和旧edge不支持；参数为replace(oldtoken, newtoken)，返回布尔值表示是否成功替换。
DOMTokenList.replace() 的基本用法和兼容性确认
这个方法确实存在，但不是所有浏览器都支持——DOMTokenList.replace() 是在 DOM Level 4 中定义的，Chrome 61+、Firefox 63+、Safari 12.1+ 才开始支持。IE 完全不支持，旧版 Edge（EdgeHTML）也不行。如果你需要兼容老环境，得降级用 classList.remove() + classList.add() 组合。
replace() 的参数顺序和返回值含义
它接收两个字符串参数：replace(oldToken, newToken)。注意：第一个是**要被替换掉的类名**，第二个是**替换成的新类名**。它返回一个布尔值：true 表示成功替换了（即 oldToken 存在且 newToken 不冲突），false 表示失败（比如 oldToken 不存在，或 newToken 已存在且 oldToken 也存在——此时不会报错，但也不执行替换）。
常见误用是把参数顺序搞反，或者以为它像字符串 replace() 那样支持正则或全局匹配——它只处理单个精确类名，且仅替换一次（即使 oldToken 出现多次，也只删一个再加一个 newToken，但 classList 本身去重，所以实际效果就是“有就换，没有就不动”）。
- ✅ 正确：
el.classList.replace('btn-primary', 'btn-secondary') - ❌ 错误：
el.classList.replace('btn-secondary', 'btn-primary')（如果元素当前没btn-secondary，返回false，什么都不会发生） - ⚠️ 注意：
el.classList.replace('a', 'a')返回false（因为 newToken 已存在，规范禁止重复添加）
与 remove()+add() 组合的关键差异
看似等价，但行为有微妙区别：
-
replace()是原子操作：要么全部完成（删 old、加 new），要么都不做（比如 old 不存在）；而remove()+add()是两步，中间可能被其他代码干扰（如 MutationObserver 触发两次） -
replace()在 oldToken 不存在时返回false，不抛错；而remove()对不存在的类名也静默成功，add()总是成功——组合写法无法直接感知“原类根本不存在”这一状态 - 性能上几乎无差别，但语义更清晰：你明确想“替换”，而不是“先删后加”
示例场景：切换主题类 theme-dark → theme-light，用 replace() 能天然避免“删了 dark 却忘了加 light”的漏写风险。
容易忽略的边界情况
别只盯着参数对错，这几个点实际项目里常踩坑：
- 类名含空格或特殊字符？
replace()只接受单个合法 token，传入'foo bar'会静默失败（返回false），因为 classList 按空格分割，'foo bar'不是有效 token - 大小写敏感：HTML class 名区分大小写，
replace('Btn', 'btn')不会匹配class="btn"（小写） - 动态生成类名时没 trim：比如从用户输入拼接
userClass.trim()忘了做，传入带首尾空格的字符串，replace()直接返回false - 在 Shadow DOM 中使用？确保获取的是目标元素自身的
classList，而不是 host 元素的——shadowRoot.querySelector(...).classList才是安全的
真正要用好 replace()，核心是把它当成一个带条件的原子更新动作，而不是字符串替换工具。它的价值不在语法糖，而在语义准确性和失败可感知性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
