如何将这段jQuery谷歌翻译代码转为原生JavaScript？

没问题，我帮你把这段jQuery代码转换成原生JavaScript，咱们一步步拆解着来，你就能明白每一步对应怎么实现了：

这段jQuery代码主要做了三件事：

1. 给footer-toggle li和.select-lng li两类元素绑定点击事件
2. 点击时获取当前li下a标签的rel属性值
3. 定位到谷歌翻译的内嵌iframe，找到包含该rel值的语言选项并模拟点击

1. 绑定点击事件 #

jQuery的$(selector).on('click', handler)对应原生的document.querySelectorAll()获取所有匹配元素，再循环给每个元素添加点击监听：

// 获取所有需要绑定点击的li元素
const langTriggerItems = document.querySelectorAll('footer-toggle li, .select-lng li');
// 给每个元素绑定点击事件
langTriggerItems.forEach(item => {
  item.addEventListener('click', handleLanguageSelect);
});

2. 获取rel属性值 #

jQuery的$(this).children("a").attr("rel")换成原生DOM API，同时加个判断避免找不到a标签时报错：

function handleLanguageSelect() {
  // 找到当前li下的a标签
  const langLink = this.querySelector('a');
  if (!langLink) return; // 没有a标签就直接退出
  
  // 获取rel属性值
  const targetLangText = langLink.getAttribute('rel');
  // 接下来处理谷歌翻译iframe的逻辑
}

3. 操作谷歌翻译的iframe #

jQuery的$("goog-te-menu-frame:first").contents().find(...)需要换成原生的iframe内容访问和DOM筛选：

function handleLanguageSelect() {
  const langLink = this.querySelector('a');
  if (!langLink) return;
  
  const targetLangText = langLink.getAttribute('rel');
  // 获取谷歌翻译的iframe
  const translateFrame = document.querySelector('goog-te-menu-frame');
  if (!translateFrame) return; // 如果iframe还没加载就退出
  
  // 访问iframe内部的文档（兼容不同浏览器写法）
  const frameDocument = translateFrame.contentDocument || translateFrame.contentWindow.document;
  
  // 找到所有语言选项的span元素，筛选出匹配文本的那个
  const langOptions = frameDocument.querySelectorAll('.goog-te-menu2 .goog-te-menu2-item span');
  for (const option of langOptions) {
    // 原jQuery用的是:contains模糊匹配，这里可以选严格匹配或模糊匹配
    // 严格匹配：if (option.textContent.trim() === targetLangText)
    // 模糊匹配：if (option.textContent.includes(targetLangText))
    if (option.textContent.trim() === targetLangText) {
      option.click();
      break; // 找到后停止循环，避免重复点击
    }
  }
}

4. 延迟初始化逻辑 #

原代码的setTimeout(googletranslate, 1000)直接保留原生写法，把初始化逻辑包进去：

function initTranslateHandler() {
  const langTriggerItems = document.querySelectorAll('footer-toggle li, .select-lng li');
  langTriggerItems.forEach(item => {
    item.addEventListener('click', handleLanguageSelect);
  });
}

// 延迟1秒执行，确保谷歌翻译的iframe已经加载完成
setTimeout(initTranslateHandler, 1000);

把上面的部分整合起来就是最终版本：

function handleLanguageSelect() {
  const langLink = this.querySelector('a');
  if (!langLink) return;
  
  const targetLangText = langLink.getAttribute('rel');
  const translateFrame = document.querySelector('goog-te-menu-frame');
  if (!translateFrame) return;
  
  const frameDocument = translateFrame.contentDocument || translateFrame.contentWindow.document;
  const langOptions = frameDocument.querySelectorAll('.goog-te-menu2 .goog-te-menu2-item span');
  
  for (const option of langOptions) {
    if (option.textContent.trim() === targetLangText) {
      option.click();
      break;
    }
  }
}

function initTranslateHandler() {
  const langTriggerItems = document.querySelectorAll('footer-toggle li, .select-lng li');
  langTriggerItems.forEach(item => {
    item.addEventListener('click', handleLanguageSelect);
  });
}

setTimeout(initTranslateHandler, 1000);

如果觉得固定1秒延迟不够可靠，可以换成监听iframe的load事件来初始化，这样能确保iframe完全加载后再绑定事件：

// 替代setTimeout的更可靠方式
const checkFrameInterval = setInterval(() => {
  const translateFrame = document.querySelector('goog-te-menu-frame');
  if (translateFrame) {
    clearInterval(checkFrameInterval);
    translateFrame.addEventListener('load', initTranslateHandler);
  }
}, 500);

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