如何一次选择两个元素并使我的代码使用querySelector影响它们？

Question

我正在将我的网站添加为夜间模式。我完成了大部分编码工作，同时开始改变设计的一些部分。我将需要在HTML中更改我的hrs并添加一个实线边框，以使它们在黑暗模式下可见。这是我的代码：

<p class="dark">
  <a id="moon" href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); 
                localStorage.getItem('mode') === 'dark' ? 
                document.querySelector('body').classList.add('dark') : 
                document.querySelector('body').classList.remove('dark')" title="nm">Night Mode🌓
                </a>
</p>

我想要做的是使用class将hr添加到我的querySelectors以及此代码但是一旦我将hrs添加到代码中它只影响body而不是hrs。我该怎么做才能使代码影响它们。

下面的代码正在运行，但我也找到了一种更简单的方法来做我想要的。对于CSS代码，我只是添加了这个代码，它也很好用。

body.dark hr {
border: 1px solid #808080;
}

Answer 1

你可以使用.querySelectorAll()和.forEach()的NodeList方法

document.getElementById("moon").addEventListener("click", e => {
  localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'
  const elements = document.querySelectorAll("body, hr");
  elements.forEach(el => {
    if (localStorage.getItem('mode') === 'dark') {
      el.classList.add('dark') 
    } else {
      el.classList.remove('dark')
    }
  })
})