为什么 classList 抛出 'undefined' 除非我专门使用 getElementById？

Question

我的大脑正在融化为什么我不能 select 具有相同 class 的多个元素（querySelector、querySelectorAll、getElementsByClassName 等）并使用 classList 检查是否只有一个 div 包含一个 class.

我看过一些教程，其中完全使用 getElementsbyClassName 作为示例，就像它们起作用一样。就我而言，在 Firefox 上，它是 Uncaught TypeError: document.getElementsByClassName(...).classList is undefined

我给这些 div 一个 css class ontoggle -

<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) {
     if(document.getElementsByClassName('dot-button').classList.contains('db-active')) {
        console.log('bruh');
     } else {
        console.log('bruw');
     }
     document.getElementById(id).classList.toggle('db-active');
}

有效的是 -

function activateDot(id) {
   document.getElementById(1).classList.remove('db-active');
   document.getElementById(2).classList.remove('db-active');
   document.getElementById(3).classList.remove('db-active');
   document.getElementById(4).classList.remove('db-active');
   document.getElementById(id).classList.toggle('db-active');
}

呜呜呜

Answer 1

getElementsByClassName returns DOM 个节点的列表，同时通过 ID returns 获取单个元素的元素。您需要遍历元素列表并为每个元素添加/切换所需的 class

为什么 classList 抛出 'undefined' 除非我专门使用 getElementById？

Why does classList throw 'undefined' unless I specifically use getElementById?

javascript

firefox