页面加载时修改无ID的span元素文本的技术求助

由于你无法修改硬编码的HTML，也没有ID可用，这里提供几个基于原生JavaScript的可行方案，确保页面加载后完成文本修改：

方法1：通过translate属性定位元素 #

利用元素唯一的translate="my_team_tab"属性精准定位目标span：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  const targetSpan = document.querySelector('span[translate="my_team_tab"]');
  // 确认找到元素再修改，避免报错
  if (targetSpan) {
    // 纯文本修改用textContent更安全
    targetSpan.textContent = 'My Event';
    // 若需插入HTML内容才用innerHTML，例如：
    // targetSpan.innerHTML = '<strong>My Event</strong>';
  }
});

方法2：结合类名和属性双重定位 #

如果担心页面存在其他同名translate属性的元素，可以结合ng-scope类进一步缩小范围：

document.addEventListener('DOMContentLoaded', function() {
  const targetSpan = document.querySelector('span[translate="my_team_tab"].ng-scope');
  if (targetSpan) {
    targetSpan.textContent = 'My Event';
  }
});

额外提示 #

• 必须等待DOM加载完成再执行代码，否则会出现找不到元素的问题，DOMContentLoaded事件就是用来确保这一点的。
• 页面带有ng-scope类，说明是Angular框架渲染的页面，如果上述方法未生效，可能是Angular在脚本执行后才完成元素渲染，这时可以尝试延迟执行：

// 延迟1秒执行（可根据实际情况调整时间）
setTimeout(function() {
  const targetSpan = document.querySelector('span[translate="my_team_tab"]');
  if (targetSpan) {
    targetSpan.textContent = 'My Event';
  }
}, 1000);

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