本文深入解析了纯前端实现多语言切换的核心技术方案：通过`data-i18n`属性精准标记可翻译元素，结合结构化语言包动态更新`textContent`、`innerHTML`及`src`等关键属性，利用`localStorage`在DOM渲染前完成语言初始化以杜绝闪屏，并扩展支持资源路径、表单属性及区域化配置；同时警示常见陷阱——如硬编码文本、整页重绘、XSS风险、伪元素不可控等问题，提供轻量、安全、可维护的零框架落地实践。

用 JavaScript 动态替换 DOM 文本是最直接的方式

不需要框架、不依赖后端，纯前端切换语言的核心就是：把页面上所有可翻译的文本抽出来，按语言键映射成不同值，再批量更新 textContent 或 innerHTML。

常见错误是硬编码中文在 HTML 里（比如

欢迎

<h1 data-i18n="welcome"></h1>
<p data-i18n="desc"></p>

然后维护一个语言包对象：

const locales = {
  zh: { welcome: "欢迎", desc: "这是一个多语言页面" },
  en: { welcome: "Welcome", desc: "This is a multilingual page" }
};

切换时遍历所有 [data-i18n] 元素，用属性值作 key 去查对应语言包：

• 必须提前确保所有 data-i18n 的值都在语言包中存在，否则会显示 undefined
• 如果元素含 HTML 结构（如带 的提示语），用 innerHTML 替换，但要防范 XSS —— 确保语言包内容可信，或用 textContent + 简单标签白名单处理
• 按钮、表单占位符、title 属性等也需一并纳入 data-i18n 覆盖范围，否则切换后残留原文

localStorage 记住用户上次选择的语言