最安全可靠的方式是直接修改 label 的 textcontent；它不解析 html、不触发重排、不丢失事件绑定，且自动转义特殊字符。
直接改 textContent 最安全可靠
label 标签本质是普通内联元素，改文字就是改其文本节点内容。用 textContent 是首选：它不解析 HTML、不触发重排、不丢失事件绑定，还能自动转义特殊字符（比如把 显示为字面量而非标签）。
常见错误是误用 innerHTML——哪怕你只塞纯文本，浏览器仍会走一遍 HTML 解析流程，多一次 DOM 重建，且若字符串里混入用户输入（如 <script>alert(1)</script>），就可能执行脚本。
- ✅ 正确写法：
document.querySelector('label[for="email"]').textContent = "邮箱地址"; - ❌ 危险写法：
label.innerHTML = "邮箱地址";（即使内容干净，也多此一举） - ⚠️ 不推荐：
label.innerText—— 在某些 CSS 隐藏状态下会返回空字符串，IE 以外的现代浏览器也不保证行为一致
需要响应式切换语言时，别硬编码 label 文本
如果 label 文字要随 locale 动态变（比如中/英/日），硬写 JS 切换 textContent 容易散落各处、难维护。更稳的方式是把文案抽离到 data 属性或外部映射对象中。
例如用 data-i18n-key 标记 label，再统一查表替换：
<label for="username" data-i18n-key="username">用户名</label>
然后批量更新：
const translations = { username: { zh: "用户名", en: "Username", ja: "ユーザー名" } };
document.querySelectorAll('[data-i18n-key]').forEach(el => {
const key = el.dataset.i18nKey;
el.textContent = translations[key]?.[currentLang] || el.textContent;
});
动态生成的 label 要确保 for 和 id 始终匹配
改完文字本身不难，但 label 的语义功能（点击聚焦 input）依赖 for 属性和目标 input 的 id 严格一致。JS 动态创建或重写 label 时，常漏掉同步更新 for 值或对应 input 的 id。
- 检查点：修改后在控制台运行
document.querySelector('label[for="xxx"]').control，应返回对应 input 元素；若为null，说明绑定断裂 - 避免用嵌套写法（
<label>文本<input></label>）动态生成，因为 input 的id可能未设，或被 JS 重复赋值导致冲突 - Vue/React 等框架中，确保
for和id都由同一响应式变量驱动，防止 SSR 与客户端渲染不一致
想改 label 后缀（比如冒号）？别碰 textContent，用 CSS attr()
如果只是想动态控制 label 后面的符号（如中文用“：”，英文用“:”，或根据必填状态加星号），不要把符号塞进文本内容里再反复改 textContent——这会污染可访问性，屏幕阅读器会把星号也读出来。
正确做法是用伪元素 + attr()：
<label data-required="true" for="name">姓名</label>
label::after {
content: attr(data-required) "：";
}
之后只需改 label.dataset.required = "false"，CSS 自动响应，且不干扰文本语义和无障碍支持。
真正容易被忽略的是：label 的可访问性价值远大于视觉样式。文字改得再顺滑，若破坏了 for/id 关联或让屏幕阅读器读错内容，就等于倒退一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
