Modul 5 · Kapitel 5.2

Hämta och ändra element

DOM gör att JavaScript kan arbeta med HTML-sidan.

Mål

Efter kapitlet ska du kunna...

hämta element med querySelector
ändra text med textContent
ändra klasser med classList
reagera på klick med addEventListener

DOM

HTML blir objekt i webbläsaren

document

body

button

JavaScript kan hitta dessa objekt och läsa eller ändra dem.

querySelector

Hitta ett element

document.querySelector(".theme-button");

document
hela HTML-sidanquerySelector
sök efter ett element".theme-button"
CSS-selektorn

CSS-selektorer

Samma syntax som i CSS

Selektor	Hittar
`"button"`	första button-elementet
`".theme-button"`	första elementet med klassen
`"#message"`	elementet med detta id

Interaktiv querySelector

Välj en selektor

document.querySelector("button")

Ett element med class="notice"

Ett element med id="message"

Första träffen

querySelector hämtar ett element

const paragraph = document.querySelector("p");

Om flera p-element matchar returneras det första.

Senare finns metoder för att hämta flera element, men här arbetar vi med ett.

Variabel

Spara elementet med const

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

button och message är namn vi väljer.
Variablerna gör elementen enkla att använda igen.

textContent

Ändra text inuti ett element

message.textContent = "Knappen klickades";

message
elementettextContent
elementets text= "..."
den nya texten

Interaktiv textContent

Byt texten

message.textContent = "Knappen klickades";

Den här texten ändras.

Event

Något händer i webbläsaren

click: användaren klickar.
input: ett fält ändras.
submit: ett formulär skickas.

I detta kapitel börjar vi med click.

addEventListener

Lyssna efter ett klick

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

Funktionen körs inte direkt. Den väntar tills klicket sker.

Händelseflöde

Tre steg

1. LyssnaaddEventListener väntar

2. Klickanvändaren agerar

3. Körfunktionen ändrar sidan

Interaktiv händelse

Räkna klick

button.addEventListener("click", function () {
  clicks += 1;
});

Väntar på klick...

0

registrerade klick

classList

Arbeta med CSS-klasser

box.classList.toggle("is-active");

JavaScript ändrar klassen.

CSS bestämmer hur klassen ser ut.

toggle

Växla på eller av

Klassen saknas	Klassen finns
`toggle()` lägger till den.	`toggle()` tar bort den.

Samma kod kan därför öppna och stänga något.

Interaktiv classList

Växla klassen is-active

box.classList.toggle("is-active");

Klassen är av.

Den här rutan ändras av CSS-klassen.

JavaScript + CSS

Låt språken samarbeta

/* CSS */
.box.is-active { background: lightgreen; }

// JavaScript
box.classList.toggle("is-active");

Undvik att lägga all design direkt i JavaScript. Växla hellre en tydligt namngiven klass.

Samlat exempel

Hitta, lyssna och ändra

const button = document.querySelector("#action");
const box = document.querySelector(".box");

button.addEventListener("click", function () {
  box.classList.toggle("is-active");
  box.textContent = "Rutan ändrades";
});

Rutan väntar på ett klick.

Felsökning

Om elementet inte hittas

Kontrollera att selektorn matchar HTML.
Kom ihåg punkt för klass och # för id.
Kontrollera stavning och stora/små bokstäver.
Kontrollera att skriptet använder defer.
Läs felmeddelandet i Console.

Prova själv

Bygg en enkel interaktion

Skapa en knapp och ett stycke i HTML.
Hämta båda med querySelector.
Lyssna på knappens click.
Ändra styckets textContent.
Lägg till en klassväxling.

Sammanfattning

Kom ihåg

querySelector hittar ett element.
textContent läser eller ändrar text.
addEventListener reagerar på händelser.
classList.toggle växlar en klass.
JavaScript ändrar tillstånd – CSS visar utseendet.