classList.toggle() 是切换双模式最直接方式，三态需结合 data 属性判断状态，iframe 中须跨上下文操作，CSS 应避免深层嵌套与 !important。
classList.toggle() 是切换视图模式最直接的方式
在 HTML 编辑器中实现「所见即所得」和「源码编辑」双模式切换，classList.toggle() 是最轻量、最可控的选择。它不依赖状态变量同步，也不需要手动判断增删，调用一次就自动翻转——适合按钮点击触发的二元模式切换。
常见错误是误用 classList.add() 或 classList.remove() 单向操作，导致多次点击后状态错乱。比如用户从「编辑模式」切到「预览模式」再切回，若只写 add('mode-preview')，第二次点击不会撤回样式，视图就卡死在预览态。
- 确保目标元素（如编辑器容器）有稳定 ID 或 class，例如
<div id="editor-container"> - 为每种模式定义语义化 CSS 类：
mode-editor（默认）、mode-preview、mode-source - 切换时只操作一个主类，避免多个类叠加干扰样式优先级
如何用 classList 实现三态模式（编辑 / 预览 / 源码）
三态不能靠 toggle() 一次完成，必须配合当前状态判断。推荐用 data 属性记录当前模式，比反复检查 classList.contains() 更可靠——因为后者在 CSS 类被 JS 其他逻辑意外修改时容易失准。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const container = document.getElementById('editor-container');
const modeBtns = document.querySelectorAll('[data-mode]');
modeBtns.forEach(btn => {
btn.addEventListener('click', () => {
const targetMode = btn.dataset.mode; // 'editor' | 'preview' | 'source'
container.setAttribute('data-current-mode', targetMode);
container.className = `mode-${targetMode}`; // 重置为单一类，避免残留
});
});
注意：className = 是最彻底的重置方式；如果想保留基础类（如 editor-container），可用 container.classList.value = 'editor-container mode-' + targetMode。
classList 在 iframe 嵌入式编辑器中的限制与绕过
当编辑器内容渲染在 <iframe> 内（如富文本编辑器使用 document.designMode = 'on'），外部页面的 classList 操作对 iframe 内容无效——因为 DOM 是隔离的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
此时必须跨上下文操作：
- 先通过
iframe.contentDocument获取内部文档对象 - 再定位到内部容器元素（如
iframe.contentDocument.body或自定义 wrapper） - 对其调用
classList.toggle()，而非外层容器 - 若 iframe 是跨域的，则完全无法访问其 DOM，需改用
postMessage协议通信
典型错误是忘记等待 iframe 加载完成就操作：iframe.onload 或 iframe.contentDocument.readyState === 'complete' 必须校验。
CSS 类命名与性能影响容易被低估
给编辑器容器加 mode-preview 类后，如果对应 CSS 规则写了大量后代选择器（如 .mode-preview .toolbar button），可能触发全量重排。更稳妥的做法是让模式类直接控制顶层容器行为，把样式收敛到少数高权重规则里。
例如：
.mode-preview #editor-container { display: block; }
.mode-source #editor-container { display: none; }
.mode-editor #editor-container textarea { height: 100%; }
而不是层层嵌套。另外，避免用 !important 强制覆盖——它会让后续调试和主题扩展变得脆弱。
复杂点在于：模式切换不仅要改视图样式，往往还要同步禁用/启用对应功能（如预览模式下应 textarea.contentEditable = false）。这些逻辑不能只靠 classList 驱动，得配合事件监听或状态管理，否则用户会遇到「看起来是预览，但还能选中文本并输入」这种体验断裂。
