javascript – Night / Dark Mode CSS Toggle in header Template File – How to Target Header, Body and Footer

In my header.php template, I have a button that looks like this: <button onclick="NightModeToggle()">Dark</button>

In my stylesheet, I have the following CSS code:

.NightModeToggle{
  background-color: black;
  color: white;
}

In an already enqueued JS file, I have this:

function NightModeToggle(){
   var element = document.body;
   element.classList.toggle("NightModeToggle");
}

I understand that it targets the body by using this line: var element = document.body;

My question is, how do I add additional targets so that I can change the background color and text color of the header and footer as well?

I tried modifying the code into this (without result):

var element = document.body;
var element = document.header;
var element = document.footer;

Any ideas?