真正起作用的语言切换需同步完成三件事：更新根元素lang属性（须符合bcp 47规范，如zh-cn）、替换所有data-i18n元素的文案、持久化选择至localstorage并初始化页面。
直接改 document.documentElement.lang 是最简操作，但光这样不行——浏览器和屏幕阅读器不会重读、不触发翻译按钮、CSS 的 :lang() 也不会更新。真正起作用的切换，必须同步完成三件事：更新根语言、替换所有文案、持久化选择。
根元素 lang 必须立刻更新
这是基础动作，但要注意写法：
- 值必须符合 BCP 47 规范，比如用
zh-CN，别写zh_CN或chinese - 大小写和短横线敏感：
en-US有效，EN-us可能被降级或忽略 - 代码示例：
document.documentElement.lang = 'en-US';
所有带 data-i18n 的元素要同步换文本
lang 属性只告诉浏览器“这是什么语言”，不负责显示哪段文字。文案得靠 JS 替换：
- 给需要翻译的元素加
data-i18n="header.title"这类键名（不是语言代码） - 维护一个扁平化的双语对象，比如：
const i18n = { 'zh-CN': { 'header.title': '首页' }, 'en-US': { 'header.title': 'Home' } }; - 切换时遍历并更新：
document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.dataset.i18n; el.textContent = i18n[nextLang][key] || el.textContent; });
局部多语言内容的 lang 属性也要更新
如果页面里有英文术语、代码块或引文，它们通常已显式写了 lang，比如：
<code lang="en">useState</code>
<pre class="brush:php;toolbar:false;" lang="bash">curl -X POST</pre><blockquote lang="fr">Merci</blockquote>
这些节点的语言是独立的，不能靠继承根语言。切换主语言时，除非你明确想保留原语种（如一段日文引用始终该是日语），否则应一并更新它们的 lang 值，例如把 <code>lang="en" 改成 lang="zh-CN"，避免语音引擎错乱或样式失效。
保存用户偏好并初始化页面
避免每次刷新都回退到默认语言：
- 切换时存入
localStorage.setItem('preferred-lang', nextLang) - 页面加载时读取：
const savedLang = localStorage.getItem('preferred-lang') || 'zh-CN'; - 在 DOM ready 后立即设根 lang 并渲染对应文案，确保首屏就正确
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
