为什么使用getElementsByClassName等方法时classList报undefined，仅getElementById正常？

• getElementsByClassName、querySelectorAll 这类批量选中元素的API，返回值是元素集合（前者为HTMLCollection类型，后者为NodeList类型），不是单个DOM节点
• classList 是单个DOM元素才有的属性，元素集合本身不携带该属性，因此直接在集合上调用.classList会触发未定义错误，和浏览器无关，属于API使用逻辑错误。你查阅的教程应该是先取了集合中指定下标的单个元素再调用classList，你漏掉了取单个元素的步骤。

不需要逐个写ID绑定移除逻辑，直接遍历所有同class元素统一移除激活类，再给当前点击元素添加激活类即可，后续新增dot按钮也无需修改JS逻辑，适配性更强：

<!-- 原有HTML无需修改 -->
<div class="dot-container">
   <div class="dot-button" id="1" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="2" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="3" onclick="activateDot(this.id)"></div>
   <div class="dot-button" id="4" onclick="activateDot(this.id)"></div>
</div>

function activateDot(id) {
  // 选中所有dot按钮
  const allDots = document.querySelectorAll('.dot-button');
  // 批量移除所有按钮的激活类
  allDots.forEach(dot => dot.classList.remove('db-active'));
  // 给当前点击的按钮添加激活类
  document.getElementById(id).classList.add('db-active');

  // 如果你需要检查是否存在激活元素可以用以下写法，代替你原有的判断逻辑
  const hasActiveDot = Array.from(allDots).some(dot => dot.classList.contains('db-active'));
  console.log(hasActiveDot ? 'bruh' : 'bruw');
}

如果要使用getElementsByClassName实现，需要先把返回的HTMLCollection转成数组再遍历：

const allDots = Array.from(document.getElementsByClassName('dot-button'));
allDots.forEach(dot => dot.classList.remove('db-active'));

如果要单独检查集合中某一个元素的类，取下标访问单个元素即可，比如检查第一个dot是否有激活类：

const firstDotHasActive = document.getElementsByClassName('dot-button')[0].classList.contains('db-active');

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