如何使用JavaScript实现点击链接切换页面多语言翻译功能

你不需要特殊的JS内置对象，用基础的DOM操作对象+自定义多语言映射表就能实现，分两种适用场景：

• 提前预设好多语言文本的场景，纯前端即可实现，也是最适合初学者入门的方案
• 实时翻译未知内容的场景，需要对接第三方翻译API，这里优先给你纯前端实现的可运行示例

1. 给所有需要翻译的DOM元素加统一的自定义标识，比如data-i18n属性，属性值对应翻译映射表里的key，不需要给每个元素单独设置id，页面元素多了之后单独设id的维护成本非常高
2. 提前定义不同语言的翻译映射对象，结构为语言标识: { 翻译key: 对应翻译文本 }
3. 给翻译链接绑定点击事件，点击时遍历所有带data-i18n标识的元素，把对应语言的文本替换到元素内即可

<!-- 页面结构 -->
<a href="#" id="translate-de">Translate to German</a>
<a href="#" id="translate-en">Back to English</a>

<h1 data-i18n="page_title">Welcome to my personal site</h1>
<p data-i18n="page_desc">This is a demo page for front-end multi-language translation</p>
<button data-i18n="submit_btn">Submit Form</button>

<script>
// 1. 定义多语言映射表
const translationMap = {
  en: {
    page_title: "Welcome to my personal site",
    page_desc: "This is a demo page for front-end multi-language translation",
    submit_btn: "Submit Form"
  },
  de: {
    page_title: "Willkommen auf meiner persönlichen Website",
    page_desc: "Dies ist eine Demoseite für mehrsprachige Frontend-Übersetzungen",
    submit_btn: "Formular absenden"
  }
}

// 2. 全局翻译函数
function switchLanguage(targetLang) {
  // 校验目标语言是否在预设映射表中
  if (!translationMap[targetLang]) return
  // 批量获取所有带翻译标识的元素
  const i18nElements = document.querySelectorAll('[data-i18n]')
  i18nElements.forEach(el => {
    const translateKey = el.getAttribute('data-i18n')
    // 替换元素文本内容
    el.textContent = translationMap[targetLang][translateKey]
  })
}

// 3. 绑定翻译链接的点击事件
document.getElementById('translate-de').addEventListener('click', (e) => {
  e.preventDefault() // 阻止a标签默认跳转行为
  switchLanguage('de')
})

document.getElementById('translate-en').addEventListener('click', (e) => {
  e.preventDefault()
  switchLanguage('en')
})
</script>

• 你提到的getElementById仅适合单个元素的定位，如果需要批量处理多个翻译元素，用querySelectorAll匹配统一属性的方式效率更高、维护成本更低
• 如果需要翻译的内容包含HTML标签，把代码中的textContent替换为innerHTML即可，但要注意XSS风险，不要用在允许用户自定义输入内容的场景
• 如果需要翻译的是未提前预设的动态内容，需要对接第三方翻译服务的API，申请对应服务的密钥后，前端调用接口拿到翻译结果再替换页面内容即可

内容的提问来源于stack exchange，提问作者Diego Fonseca