只改 document.documentelement.lang 无法正确切换外文内容，因为浏览器和屏幕阅读器在 html 解析时已锁定各元素自身的 lang 值，运行时修改根节点不触发重解析，故 api 仍按英文处理；必须逐个更新显式声明 lang 的元素，且值须严格符合 bcp 47（如 zh-hans、en-us），并区分大小写与短横线，否则等于未声明。
为什么只改 document.documentElement.lang 无法正确切换外文内容
浏览器和屏幕阅读器在解析 HTML 时，就已根据每个元素自身的 lang 属性决定语音引擎、字体回退、断字规则和拼写检查行为。运行时修改 document.documentElement.lang 不会触发重解析，所以 <p lang="en">API</p> 仍被当成英文朗读，即使根节点已设为 zh-Hans。
常见错误是以为“切了根语言 = 全页语言变了”，结果外文术语、代码注释、引用段落全部读错、排版异常、CSS 的 :lang(en) 选择器也不生效。
- 必须逐个遍历并更新已有
lang属性的元素，不能依赖继承 -
<pre class="brush:php;toolbar:false;" lang="bash"></pre>这类技术语种通常不随主语言变，需加data-keep-lang显式跳过 -
<blockquote lang="ja"></blockquote>是引用内容，应保留原lang；若是用户生成内容，则需同步更新
lang 属性值必须严格符合 BCP 47 标准
写错格式不会报错，但等于没写：搜索引擎忽略、屏幕阅读器静默失败、:lang() 伪类完全不匹配。
关键细节：
- 用短横线
-，不是下划线_：✅zh-Hans，❌zh_Hans - 大小写敏感：✅
en-US，❌EN-us - 三段式（如
zh-Hans-CN）不被 IANA 收录，Chrome 会静默降级为zh - 局部外文内容优先用标准码：
<p lang="en">React Router</p>，别用lang="javascript"或lang="code"
如何安全更新混排页面中的外文 lang 属性
不能暴力清空所有子元素的 lang 并统一设成主语言——这会破坏语义，让日文引文被中文语音引擎朗读，或让英文代码注释失去正确的断字支持。
推荐做法是带策略遍历：
- 先收集所有带
lang属性的元素：document.querySelectorAll('[lang]') - 对每个元素检查是否带
data-keep-lang，有则跳过 - 若无
data-keep-lang，再判断其当前lang是否属于“主语言家族”（如en-US和en-GB都算en），是则更新为新主语言（如zh-Hans），否则保留 - 特别处理
<pre class="brush:php;toolbar:false;"></pre>、<code>、<blockquote></blockquote>等语义明确的容器，按业务规则决定是否保留
动态插入的外文 DOM 怎么处理 lang
AJAX 加载弹窗、表格行、评论列表时，如果其中含 <p lang="fr">Merci</p>，这些新节点的 lang 属性不会自动继承或响应全局切换 —— 它们是在 JS 插入后才存在的，必须手动初始化。
解决方案很简单但容易漏：
- 插入前，确保字符串中已含正确
lang属性（服务端渲染或模板拼接时写死） - 插入后立即调用翻译函数，并显式遍历新节点内的
[lang]，按上述策略更新 - 避免用
innerHTML直接拼接未清理的用户输入，防止lang被覆盖或注入恶意值
最常被忽略的是：SVG 内文本、<title></title> 标签、<meta name="description"> 这些非可视但关键的节点，它们的 lang 同样影响 SEO 和辅助技术，却极少被纳入更新逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
