如何点击class为oldwidth的DIV后批量切换所有同类元素为newwidth

问题场景 #

点击任意带有oldwidth类的<div>后，需要将所有该类的元素替换为newwidth类，但现有代码仅能修改第一个匹配元素。

初始HTML结构：

<div class="oldwidth">sample 1 text</div>
<div class="oldwidth">sample 2 text</div>
<div class="oldwidth">sample 2 text</div>
<div class="oldwidth">sample 3 text</div>

期望修改后结构：

<div class="newwidth">sample 1 text</div>
<div class="newwidth">sample 2 text</div>
<div class="newwidth">sample 2 text</div>
<div class="newwidth">sample 3 text</div>

现有代码问题 #

之前使用getElementsByClassName("oldwidth")[0]或document.querySelector('.oldwidth')，都只会获取第一个匹配元素，因此仅能修改单个元素，无法批量操作。

解决方案 #

方法1：遍历元素绑定点击事件

直接获取所有oldwidth元素，给每个元素绑定点击事件，触发时遍历所有元素替换类名：

// 获取所有oldwidth元素
const elements = document.getElementsByClassName('oldwidth');

// 遍历绑定点击事件
for (let elem of elements) {
  elem.addEventListener('click', function() {
    // 重新获取所有oldwidth元素，避免DOM变化导致集合失效
    const allOldElems = document.getElementsByClassName('oldwidth');
    // 遍历替换类名
    for (let item of allOldElems) {
      item.classList.remove('oldwidth');
      item.classList.add('newwidth');
    }
  });
}

方法2：事件委托（性能更优，推荐）

利用事件冒泡特性，给父元素绑定一次事件，判断点击目标后批量修改：

// 可替换为这些div的直接父容器，缩小事件范围
document.body.addEventListener('click', function(e) {
  // 检查点击元素是否包含目标类
  if (e.target.classList.contains('oldwidth')) {
    // 获取所有目标元素并批量替换类名
    document.querySelectorAll('.oldwidth').forEach(elem => {
      elem.classList.replace('oldwidth', 'newwidth');
    });
  }
});

关键说明 #

• getElementsByClassName返回动态HTMLCollection，DOM变化时会自动更新；querySelectorAll返回静态NodeList，需重新获取才能拿到最新状态。
• classList.replace(oldClass, newClass)是简洁的类名替换方法，若需兼容IE，可改用classList.remove()加classList.add()组合。

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