Kap 5.2 - Hämta och ändra element

Mål

• Hämta element med document.querySelector.
• Ändra text med textContent.
• Ändra klasser med classList.
• Reagera på klick med addEventListener.

Hitta ett element

querySelector använder CSS-selektorer. Det betyder att du kan leta efter exempelvis en klass, ett id eller ett elementnamn.

const button = document.querySelector(".theme-button");
const message = document.querySelector("#message");

Ändra text

textContent ändrar texten inuti ett element.

message.textContent = "Knappen klickades";

Lyssna på events

addEventListener kopplar en funktion till något som händer, till exempel ett klick.

button.addEventListener("click", function () {
    message.textContent = "Du klickade på knappen";
});

Växla klass

classList.toggle lägger till klassen om den saknas och tar bort den om den redan finns.

document.body.classList.toggle("dark-mode");