如何检查并移除HTML列表中li元素的active类？

现有如下HTML结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
   <ul id="freelancer">
     <li class="item active">Name</li>
     <li class="item">Skills</li>
     <li class="item">Cost</li>
     <li class="item active">Projects</li>
   </ul>
  </div>
</body>
</html>

需求是找出所有带有active类的<li>元素并移除该类，但document.querySelector('li')仅能获取第一个匹配的<li>元素，无法批量处理。以下是几种实用解决方法：

方法1：用querySelectorAll精准匹配+遍历 #

querySelectorAll会返回所有符合选择器的元素节点列表，直接遍历即可移除类：

// 直接选中所有带active类的li元素
const activeItems = document.querySelectorAll('li.active');
// 遍历移除类
activeItems.forEach(item => item.classList.remove('active'));

如果需要先判断再移除（比如后续有扩展逻辑），可以这样写：

const allLiItems = document.querySelectorAll('li');
allLiItems.forEach(item => {
  if (item.classList.contains('active')) {
    item.classList.remove('active');
  }
});

方法2：结合父元素缩小范围+getElementsByClassName #

如果页面其他区域也有active类元素，可通过目标<ul>缩小查找范围，避免误操作：

const targetList = document.getElementById('freelancer');
// 获取列表内所有带active类的元素
const activeItems = targetList.getElementsByClassName('active');
// 把HTMLCollection转为数组后遍历
Array.from(activeItems).forEach(item => item.classList.remove('active'));

方法3：传统for循环（兼容旧浏览器） #

如果需要兼容不支持forEach的老旧浏览器，用传统for循环更稳妥：

const activeItems = document.querySelectorAll('li.active');
for (let i = 0; i < activeItems.length; i++) {
  activeItems[i].classList.remove('active');
}

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