domtokenlist.replace()在现代浏览器中可用，edge 17+、chrome 61+、firefox 49+、safari 10.1+支持，ie完全不支持。
replace方法在DOMTokenList中是否可用
现代浏览器中，DOMTokenList.replace() 是标准支持的方法，但 IE 完全不支持，Edge 17+、Chrome 61+、Firefox 49+、Safari 10.1+ 才开始提供。如果你的项目需兼容旧版 Edge 或 Firefox replace() 会直接报 TypeError: tokenList.replace is not a function。
正确调用replace的参数和行为
replace() 接收两个字符串参数：oldToken 和 newToken，它只替换第一个匹配的类名（即使元素有多个相同类名，也仅处理首个），且大小写敏感。替换成功返回 true，失败（如 oldToken 不存在）返回 false。
常见误用：
- 传入正则或数组 ——
classList.replace(/old/, 'new')会报错，它只接受纯字符串 - 忽略返回值盲目链式调用 ——
el.classList.replace('a', 'b').add('c')会失败，因为replace()返回布尔值，不是DOMTokenList - 假设自动去重 —— 若
newToken已存在，不会移除旧的再加新的，而是先删oldToken，再加newToken（最终仍唯一）
示例：
const el = document.getElementById('my-btn');
console.log(el.classList.replace('btn-default', 'btn-primary')); // true
console.log(el.className); // "btn-primary"（原只有 btn-default）
兼容性 fallback 方案怎么写
当需要支持老浏览器时，不能直接降级为 remove() + add()，因为这会丢失顺序（add() 总是追加到末尾），而 replace() 保持原有位置。稳妥做法是手动遍历 classList 字符串：
- 读取
el.className，用String.prototype.replace()替换首个匹配（注意加单词边界防止子串误替） - 赋值回
el.className，触发重排（副作用可控，因 class 变更本就会触发） - 或转成数组操作：
Array.from(el.classList)→map()→join(' ')→ 赋值
轻量 fallback 示例：
function replaceClass(el, oldCls, newCls) {
if (el.classList.replace) {
return el.classList.replace(oldCls, newCls);
}
const re = new RegExp(`\b${oldCls}\b`, 'g');
el.className = el.className.replace(re, newCls);
return el.className.includes(newCls);
}
replace和toggle('old', 'new')有什么区别
DOMTokenList.toggle(token, force) 的双参形式（Firefox 69+、Chrome 82+、Safari 15.4+）行为接近 replace()，但语义不同：它根据 force 布尔值决定“是否必须存在”，而非“是否替换”。例如 toggle('a', false) 等价于 remove('a')，toggle('a', true) 等价于 add('a')；它**不保证 oldToken 存在才操作 newToken**，所以不能安全替代 replace()。
真正等效的写法只能是显式判断：
if (el.classList.contains('old')) {
el.classList.remove('old').add('new');
}
但注意：这仍是两步 DOM 操作，可能触发两次样式重计算，而原生 replace() 是原子操作，性能略优。
实际项目中，如果只需简单替换且兼容性明确，优先用 replace()；否则 fallback 到 className 字符串处理更稳定——毕竟类名变更本质就是字符串变更，别被 API 表面迷惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
