JavaScript无法修改同class所有元素的类名，问题原因是什么？

开发者阿泽

2026-5-27

问题分析与解决：批量移除元素类名失效的原因及修复方案

你遇到的这个问题其实很常见——想用JavaScript批量移除表格里多个<i class="fa fa-trash fa-fw"></i>元素的类名，单个用getElementById操作没问题，但用getElementsByClassName就完全没效果，对吧？

问题根源

核心问题出在getElementsByClassName的返回值上：它返回的不是单个DOM元素，而是一个HTMLCollection（类数组对象），里面包含了所有匹配该类名的元素。你直接给这个集合设置.className = ''是无效的，因为这个集合本身并没有className属性，必须遍历集合里的每一个元素，逐个修改才行。

修复方案

这里给你几种可行的解决办法：

方法1：遍历`HTMLCollection`（兼容旧浏览器）

<script>
  if(1){
    // 获取所有带fa-trash类的元素集合
    const trashIcons = document.getElementsByClassName('fa-trash');
    // 用for循环逐个处理每个元素
    for(let i = 0; i < trashIcons.length; i++){
      trashIcons[i].className = '';
    }
  }
</script>

方法2：用`querySelectorAll`+`forEach`（更现代简洁）

querySelectorAll返回的NodeList支持直接用forEach遍历，代码更清爽：

<script>
  if(1){
    // 选择所有带.fa-trash类的元素
    document.querySelectorAll('.fa-trash').forEach(icon => {
      icon.className = '';
    });
  }
</script>

额外补充：如果只想移除特定类（而非清空所有）

如果你不想把元素的类名全部清空，只是移除fa-trash这类特定类，可以用classList.remove，还能一次移除多个类：

<script>
  if(1){
    document.querySelectorAll('.fa-trash').forEach(icon => {
      // 同时移除多个类名
      icon.classList.remove('fa-trash', 'fa', 'fa-fw');
    });
  }
</script>