将查询代码从jQuery转换为普通JS

Question

下面是我尝试删除并转换为标准JS代码的jQuery代码:

$('.switch').click(()=>{
    $([".light [class*='-light']", ".dark [class*='-dark']"]).each((i,ele)=>{
        $(ele).toggleClass('bg-light bg-dark')
        $(ele).toggleClass('text-light text-dark')
        $(ele).toggleClass('navbar-light navbar-dark')
    })
    $('body').toggleClass('light dark')
})

这就是我想出来的:

for (let s of [".light [class*='-light']", ".dark [class*='-dark']"]) {
  document.querySelectorAll(s).forEach((element, index) => {
    element.classList.toggle('bg-light bg-dark')
    element.classList.toggle('text-light text-dark')
    element.classList.toggle('navbar-light navbar-dark')
  })
}
document.querySelector("body").classList.toggle('light dark');

但我收到错误消息:

无法对“DomTokenList”执行“toggle”:提供的令牌（“light dark”）包含HTML空格字符，这些字符在令牌中无效

有人能看出这段代码或我的其他“更新”代码有什么问题吗？ 我是新来的香草JS。 太谢谢你了！

Answer 1

这是因为toggle一次只需要一个类:

['light', 'dark'].forEach(el => document.querySelector("body").classList.toggle(el));