getElementByClassName+setAttribute失效：首个元素类未被修改

核心问题分析 #

你遇到的问题大概率来自两个关键点：

1. 动态HTMLCollection的遍历陷阱：getElementsByClassName返回的是动态集合，当你修改元素的class时，集合会实时更新（比如元素移除目标class后会自动从集合中消失），导致循环漏处理或异常。
2. 错误的类名修改方式：用setAttribute('class', ...)会完全替换原有class属性，不仅容易丢失原有样式，还会触发动态集合的更新，引发遍历问题。

正确实现代码 #

方式1：转静态数组遍历（解决动态集合问题）

把动态的HTMLCollection转成静态数组，再用classList.add追加类名（这个API会自动处理重复类名，不会覆盖原有样式）：

// 把动态集合转成静态数组
const tableElements = Array.from(document.getElementsByClassName('你的目标类名'));
// 批量添加类
tableElements.forEach(el => {
  el.classList.add('table-info');
});

方式2：用querySelectorAll（静态NodeList更稳定）

querySelectorAll返回的是静态NodeList，不会随DOM变化实时更新，遍历更可靠：

const tableElements = document.querySelectorAll('.你的目标类名');
tableElements.forEach(el => {
  el.classList.add('table-info');
});

确保页面加载前生效的关键 #

要让Bootstrap在页面渲染时就识别到类名，必须保证脚本在DOM解析完成后、页面渲染前执行：

• 把脚本放在</body>标签的最前面（推荐），此时DOM已经全部解析完成：

<body>
  <!-- 你的页面内容（包括表格） -->
  <script>
    const tableElements = Array.from(document.getElementsByClassName('你的目标类名'));
    tableElements.forEach(el => el.classList.add('table-info'));
  </script>
</body>

• 如果要把脚本放在<head>里，给<script>标签加defer属性，它会在DOM解析完成后自动执行：

<head>
  <!-- 引入Bootstrap CSS -->
  <script defer>
    // 上面的代码
  </script>
</head>

排查第一个元素未生效的额外要点 #

如果第一个元素还是没加上类：

• 检查该元素的原有class是否已经包含table-info（classList.add会自动跳过已存在的类名，这是正常行为）。
• 确认你的目标类名拼写正确，和元素上的class完全匹配（区分大小写）。

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