基于文档内文本修改类元素背景颜色的代码问题求助

核心问题1：getElementsByClassName返回集合而非单个元素 #

document.getElementsByClassName()返回的是HTMLCollection（类数组对象），包含页面中所有匹配该类名的元素。你直接对集合调用.style属性是无效的——集合本身没有这个属性，必须遍历集合中的每个元素来设置样式。

核心问题2：可能存在DOM未加载完成的情况 #

如果你的脚本放在页面<head>标签中，会在DOM元素渲染前执行，此时调用getElementsByClassName会得到空集合，自然无法修改样式。

修复后的代码 #

<script>
// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  if (window.location.href.startsWith('https://mytestsite.com.au/')) {
    // 用includes替代indexOf，逻辑更直观
    if (document.documentElement.innerText.includes('API')) {
      const targetElements = document.getElementsByClassName('training-card__name');
      // 遍历所有匹配元素，逐个设置背景色
      for (let i = 0; i < targetElements.length; i++) {
        targetElements[i].style.backgroundColor = "red";
      }
    }
  }
});
</script>

额外优化建议 #

如果页面中只有一个目标元素，推荐使用document.querySelector()直接获取单个元素，代码更简洁：

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.location.href.startsWith('https://mytestsite.com.au/') && document.documentElement.innerText.includes('API')) {
    const targetElement = document.querySelector('.training-card__name');
    // 先判断元素是否存在，避免报错
    if (targetElement) {
      targetElement.style.backgroundColor = "red";
    }
  }
});
</script>

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