如何在页面加载后用JavaScript修改HTML的item_status元素类名

首先先帮你修正了原始HTML代码的标签缺失问题（原代码结尾标签不完整）：

<table border="1" cellpadding="5" class="product-data" rules="all">
  <tbody> 
    <tr>
      <td class="item_price">$ 3.99</td> 
    </tr> 
    <tr style="color: #aaaaaa; text-decoration: line-through;">
      <td class="item_beforeprice">$ 39.95</td>
    </tr> 
    <tr></tr> 
    <tr class="hidden">
      <td class="item_status">Sold</td>
    </tr> 
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

要在页面加载完成后修改class="item_status"元素的类名，核心思路是等DOM完全加载后定位目标元素，再用JavaScript操作它的类列表，下面给你两种实用的实现方式：

方式一：修改单个目标元素（推荐） #

如果页面里只有这一个.item_status元素，用这个方法最直接：

// 等待页面DOM全部加载完成再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 找到带有item_status类的元素
  const statusElement = document.querySelector('.item_status');
  
  // 先检查元素是否存在，避免页面没有该元素时报错
  if (statusElement) {
    // 方案1：移除旧类，添加新类（保留原有的item_status类，只修改hidden）
    statusElement.classList.remove('hidden');
    statusElement.classList.add('visible'); // 替换成你需要的新类名
    
    // 方案2：直接替换指定类（如果要把hidden换成另一个类，现代浏览器都支持）
    // statusElement.classList.replace('hidden', 'visible');
    
    // 方案3：完全替换所有类名（会移除item_status和hidden，不推荐除非你要彻底替换）
    // statusElement.className = "new-status-class";
  }
});

方式二：批量修改多个元素 #

如果页面里有多个.item_status元素，用querySelectorAll遍历修改：

document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带有item_status类的元素
  const statusElements = document.querySelectorAll('.item_status');
  
  // 遍历每个元素并修改类名
  statusElements.forEach(element => {
    element.classList.remove('hidden');
    element.classList.add('visible');
  });
});

关键说明 #

• DOMContentLoaded事件：确保页面的HTML结构完全加载后再执行JS，避免出现“找不到元素”的错误。你也可以把JS代码放在<body>标签的最后面，效果是一样的。
• classList API：这是现代浏览器推荐的操作类名的方式，它可以灵活地添加、移除、替换类名，不会影响元素原有的其他类（比如保留item_status类）。
• 元素存在检查：加上if (statusElement)可以防止页面没有目标元素时抛出错误，让代码更健壮。

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