Dark mode multiple id and class selection doesnt work

I'm trying to make darkmode, but I'm having trouble with batch class and id selection and saving to localstorage. The function does not save to localstorage and takes the .header in elementbodydark selection. In Elementcomponentdark, it does not select any of them. How can I fix this function and batch select class and id at the same time? Any help? Thank you so much

    function darkmode() {
  var elementbodylightClass = document.querySelector("a");
  var elementbodylightId = document.querySelector("#gundem-section");

  var elementbodydarkClass = document.querySelector(".header");
  var elementbodydarkId = document.querySelector(
    "#slide-sec, #kesfet, #currency-weather"
  );

  var elementcomponentdarkClass = document.querySelector(
    ".top-header, .main-news-navbar"
  );
  var elementcomponentdarkId = document.querySelector("a");

  var elementcomponentwhiteClass = document.querySelector("a");
  var elementcomponentwhiteId = document.querySelector("a");

  localStorage.setItem("dark-mode-active", "true");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodydarkClass.classList?.add("dark-mode-dark-body")
    : "";
  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodydarkId.classList?.add("dark-mode-dark-body")
    : "";

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodylightClass.classList?.add("dark-mode-light-body")
    : "";
  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodylightId.classList?.add("dark-mode-light-body")
    : "";

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentdarkClass.classList?.add("dark-mode-dark-components")
    : "";
  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentdarkId.classList?.add("dark-mode-dark-components")
    : "";

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentwhiteClass.classList?.add("dark-mode-white-components")
    : "";
  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentwhiteId.classList?.add("dark-mode-white-components")
    : "";
}

function darkmodeoff() {
  var elementbodylightClass = document.querySelector("a");
  var elementbodylightId = document.querySelector("#gundem-section");

  var elementbodydarkClass = document.querySelector(".header");
  var elementbodydarkId = document.querySelector(
    "#slide-sec, #kesfet, #currency-weather"
  );

  var elementcomponentdarkClass = document.querySelector(
    ".top-header, .main-news-navbar"
  );
  var elementcomponentdarkId = document.querySelector("a");

  var elementcomponentwhiteClass = document.querySelector("a");
  var elementcomponentwhiteId = document.querySelector("a");

  localStorage.setItem("dark-mode-active", "false");

  localStorage.getItem("dark-mode-active") === "false"
    ? elementbodydarkClass.classList?.remove("dark-mode-dark-body")
    : "";
  localStorage.getItem("dark-mode-active") === "false"
    ? elementbodydarkId.classList?.remove("dark-mode-dark-body")
    : "";

  localStorage.getItem("dark-mode-active") === "false"
    ? elementbodylightClass.classList?.remove("dark-mode-light-body")
    : "";
  localStorage.getItem("dark-mode-active") === "false"
    ? elementbodylightId.classList?.remove("dark-mode-light-body")
    : "";

  localStorage.getItem("dark-mode-active") === "false"
    ? elementcomponentdarkClass.classList?.remove("dark-mode-dark-components")
    : "";
  localStorage.getItem("dark-mode-active") === "false"
    ? elementcomponentdarkId.classList?.remove("dark-mode-dark-components")
    : "";

  localStorage.getItem("dark-mode-active") === "false"
    ? elementcomponentwhiteClass.classList?.remove("dark-mode-white-components")
    : "";
  localStorage.getItem("dark-mode-active") === "false"
    ? elementcomponentwhiteId.classList?.remove("dark-mode-white-components")
    : "";
}
console.log("asd");

function onload() {
  var elementbodylightClass = document.querySelector("a");
  var elementbodylightId = document.querySelector("#gundem-section");

  var elementbodydarkClass = document.querySelector(".header");
  var elementbodydarkId = document.querySelector(
    "#slide-sec, #kesfet, #currency-weather"
  );

  var elementcomponentdarkClass = document.querySelector(
    ".top-header, .main-news-navbar"
  );
  var elementcomponentdarkId = document.querySelector("a");

  var elementcomponentwhiteClass = document.querySelector("a");
  var elementcomponentwhiteId = document.querySelector("a");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodydarkClass.classList?.toggle("dark-mode-dark-body")
    : elementbodydarkClass.classList?.remove("dark-mode-dark-body");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodydarkId.classList?.toggle("dark-mode-dark-body")
    : elementbodydarkId.classList?.remove("dark-mode-dark-body");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodylightClass.classList?.toggle("dark-mode-light-body")
    : elementbodylightClass.classList?.remove("dark-mode-light-body");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementbodylightId.classList?.toggle("dark-mode-light-body")
    : elementbodylightId.classList?.remove("dark-mode-light-body");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentwhiteClass.classList?.toggle("dark-mode-white-components")
    : elementcomponentwhiteClass.classList?.remove(
        "dark-mode-white-components"
      );

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentwhiteId.classList?.toggle("dark-mode-white-components")
    : elementcomponentwhiteId.classList?.remove("dark-mode-white-components");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentdarkClass.classList?.toggle("dark-mode-dark-components")
    : elementcomponentdarkClass.classList?.remove("dark-mode-dark-components");

  localStorage.getItem("dark-mode-active") === "true"
    ? elementcomponentdarkId.classList?.toggle("dark-mode-dark-components")
    : elementcomponentdarkId.classList?.remove("dark-mode-dark-components");
}

I created fully functional dark mode. New codes here;

choose components ;

 const elementbodylightId = Array.from(
    document.querySelectorAll(
      "#gundem-section, #etkinlik-section, #straight-mainpage-img"
    )
  );

save localstore;

  localStorage.getItem("dark-mode-active") === "true";
  for (var i = 0; i < elementbodylightId.length; i++) {
    elementbodylightId[i].classList.add("dark-mode-light-body");
  }

for onload ;

 for (var i = 0; i < elementbodydarkId.length; i++) {
    if (localStorage.getItem("dark-mode-active") === "true") {
      elementbodydarkId[i].classList.toggle("dark-mode-dark-body");
    } else {
      elementbodydarkId[i].classList.remove("dark-mode-dark-body");
    }
  }