动态修改按钮文本的核心概念
直接修改文本的场景与原因
在用户交互中，按钮文本需要随状态变化而更新，例如加载中、完成、切换开关等场景。为提升可用性，及时、准确地呈现当前操作的意图是首要原则。
通过清晰的文本反馈，可以降低用户误解的概率，减少重复点击和错误操作的发生。这也是实现按钮文本动态修改的核心动机。
文本状态与本地化的连接
按钮文本应与应用状态绑定，避免文本和实际状态不一致造成的困惑。将文本与数据模型对齐，便于在本地化场景中快速替换。
在本地化场景中，避免硬编码，使用资源文件或字典来驱动文本变更，从而实现跨语言的无缝切换。
文本操作的技术对比
innerText vs textContent vs innerHTML
textContent直接操作节点文本，通常具备更高的性能与稳定性，且不受渲染布局影响，推荐用于简单文本替换。
innerText考虑了样式与排版，结果会随渲染而变化，在部分浏览器中表现不一致，遇到跨浏览器兼容性问题时应谨慎使用。
innerHTML允许将文本中嵌入 HTML 片段，如添加图标或高亮文本，但需要额外的安全性考量，避免 XSS 漏洞。
跨浏览器兼容性要点
统一选择 textContent作为首选文本更新方式可以获得更好的跨浏览器一致性。
对于需要富文本的场景，可以在保持安全的前提下使用 innerHTML，并在替换前进行输入净化。
无障碍和可访问性考虑
ARIA 属性与屏幕阅读器
通过 aria-live等属性告知屏幕阅读器文本变化，确保用户能够感知更新。
在文本变化时，若按钮本身文本不足以表达状态，可附加 aria-label 或者更丰富的描述，以提升可访问性。
按钮文本变化与焦点管理
更新文本时保持焦点稳定，避免把焦点意外移到按钮外或丢失。必要时可手动维护当前焦点位置，提升无障碍体验。
文本更新应避免引发突然的视觉跳动，使用渐变或占位文本过渡有助于平滑过渡。
常见实现方式与代码示例
纯原生 JavaScript 实现
使用 textContent 更新按钮文本，是最简单且高效的方式之一。
下面给出一个简单的示例，演示在点击按钮后将文本切换为“处理中...”，完成后再切换回原始文本。
// HTML 结构
<button id="actionBtn" aria-label="执行操作">执行中</button>// JavaScript 实现
const btn = document.getElementById('actionBtn');
const original = btn.textContent;btn.addEventListener('click', () => {btn.textContent = '处理中...';// 模拟异步操作setTimeout(() => {btn.textContent = original;btn.setAttribute('aria-label', '执行操作已完成');}, 1500);
});保持可访问性描述同步更新，在文本变更时同时更新 aria-label，确保辅助技术的描述与视觉文本一致。
// 同步 aria-label
btn.textContent = '完成';
btn.setAttribute('aria-label', '按钮已完成，点击可再次执行操作');结合 HTML 与数据属性的示例
通过 data- 属性管理状态，使状态与视觉文本解耦，便于维护与本地化。
数据驱动的方法可以让文本更新更具可扩展性，适用于多个按钮之间共享状态或切换文本集合的场景。
<button id="stateBtn" data-state="idle">开始</button>const stateBtn = document.getElementById('stateBtn');
stateBtn.addEventListener('click', () => {const isIdle = stateBtn.getAttribute('data-state') === 'idle';stateBtn.textContent = isIdle ? '处理中…' : '开始';stateBtn.setAttribute('data-state', isIdle ? 'busy' : 'idle');stateBtn.setAttribute('aria-label', isIdle ? '正在处理中' : '点击开始');
});性能与可维护性要点
最小化重排重绘
仅更改文本节点通常不会引发大规模布局重新计算，但频繁修改需要避免在短时间内大量更新。
将文本更新与其他 DOM 操作合并，使用批量更新或请求动画帧（requestAnimationFrame）等手段以降低性能成本。
代码结构化与可维护性
将文本更新逻辑封装成函数，并对不同状态提供单独的文本映射表，便于后续扩展与本地化替换。
通过明确的 API 接口暴露文本修改能力，减少耦合，提高测试性。
示例要点：将状态到文本的映射集中在一个地方，可以快速添加新的状态文本而不影响现有逻辑。
