Błąd zmiennej "tagName" przy dodawaniu do elementu DOM

Question

Mam działającą funkcję, która ma za zadanie dodać klasę do elementu body

function addClass()
{
  let tagName = codeControlsEl.textContent;
  console.log(tagName);
  let newClass = addClassInput.value;
  console.log(newClass);
  dom.body.classList.add(newClass);
  const serializer = new XMLSerializer();
  const newCode = (serializer.serializeToString(dom));
  code.textContent = newCode;
}
addClassButton.onclick = addClass;

lecz gdy podmienię body na zmienną tagName

function addClass()
{
  let tagName = codeControlsEl.textContent;
  console.log(tagName);
  let newClass = addClassInput.value;
  console.log(newClass);
  dom.tagName.classList.add(newClass);
  const serializer = new XMLSerializer();
  const newCode = (serializer.serializeToString(dom));
  code.textContent = newCode;
}
addClassButton.onclick = addClass;

której wartość jest widoczna w konsoli, wyświetla się błąd

Screen Online

Co zrobić aby to zadziałało?

Answer 1

let tagName = codeControlsEl.textContent;

Twoja zmienna tagName zawiera string, który nie jest obiektem w tym przypadku Node, możesz np. użyć querySelector()

[ on-line ]

dom.querySelector(tagName).classList.add(newClass);

Answer 2

Uhh, ale na siódmej linii nie używasz ani zmiennej body ani zmiennej tagName. Raz używasz pole "body" obiektu "dom", a raz pole "tagName" obiektu "dom". Wygląda, że "dom" ma tylko ten pierwszy.

Comments

Nie rozumiem. Wartością zmiennej tagName jest body, więc moim celem jest, aby w kodzie była nazwa zmiennej, ale przeglądarka interpretowała zawartość zmiennej jako tag html (W tym przypadku body), a nie jej nazwy (tagName)

Screen tutaj

---

No... nie. Nie rozumiesz jak się używa obiektów.

var obiekt = {x: 1, y: 2, costam: 3};
console.log(obiekt.costam) // 3

`o.costam` to zawsze wyciąga pole o nazwie "costam". To jest równoważne napisaniu

console.log(obiekt["costam"]) // 3

To że masz zmienną która tak się składa że ma tą samą nazwę zupełnie nie zmienia zachowania kodu:

var costam = "x";
console.log(obiekt.costam);
// wciąz 3 - to wciąż wyciąga pole "costam", a nie pole "x".
// Zmienna powyżej zupełnie nie wpływa na tą linię kodu.

Jeśli chcesz zmienną użyć do indeksowania, użyj... indeksowania.

var tablica = ["a", "b", "c"];
var zmienna = 1;
console.log(tablica[zmienna]) // "b"

var obiekt = {x: 1, y: 2, costam: 3};
var zmienna = "x";
console.log(obiekt[zmienna]) // 1, bo to wyciąga obiekt["x"] czyli obiekt.x