Jobbe med DOM-en

Forutsetning

Denne siden forutsetter at du forstår hva DOM-en er – et tre av objekter som nettleseren bygger fra HTML-en din. Hvis du er usikker, start med Hva er DOM-en?.

Velge elementer

For å gjøre noe med et element på siden, må du først finne det i DOM-treet.

getElementById

Søker gjennom treet og finner noden med riktig id. Returnerer ett element (eller null hvis ingen matcher).

const title = document.getElementById('main-title');

querySelector

Finner det første elementet som matcher en CSS-selektor. Mer fleksibel enn getElementById – du kan bruke alle CSS-selektorer du allerede kan.

const button = document.querySelector('.btn');
const firstP = document.querySelector('p');
const navLink = document.querySelector('header nav a');

querySelectorAll

Finner alle elementer som matcher. Returnerer en NodeList som du kan loope gjennom med forEach.

const allButtons = document.querySelectorAll('.btn');

allButtons.forEach(function(btn) {
    console.log(btn.textContent);
});

Anbefaling

Bruk querySelector og querySelectorAll – de bruker CSS-selektorer du allerede kan. getElementById fungerer fint for enkle id-oppslag.

Endre innhold

textContent

Endrer tekstinnholdet på en node. Trygt å bruke – behandler alt som ren tekst.

const message = document.querySelector('#message');
message.textContent = 'Ny melding';

Husk: du endrer en egenskap på et objekt i DOM-treet, ikke HTML-filen din.

innerHTML

Endrer HTML-innholdet. Kan inkludere tagger som nettleseren tolker.

const content = document.querySelector('#content');
content.innerHTML = '<strong>Fet</strong> og <em>kursiv</em>';

Vær forsiktig med innerHTML

Bruk textContent når du bare trenger tekst. innerHTML kan være en sikkerhetsrisiko hvis du setter inn brukerinput – det kan tolkes som kode.

Endre stil

Inline styles

Du kan sette CSS-egenskaper direkte via JavaScript. CSS-egenskaper med bindestrek blir camelCase:

const box = document.querySelector('.box');

box.style.color = 'blue';
box.style.backgroundColor = 'yellow';
box.style.fontSize = '20px';
box.style.border = '2px solid black';

CSS til JavaScript

CSS	JavaScript
`background-color`	`backgroundColor`
`font-size`	`fontSize`
`border-radius`	`borderRadius`
`z-index`	`zIndex`

classList

En bedre måte å style på: bruk CSS-klasser. Definer stilene i CSS, og la JavaScript legge til eller fjerne klasser.

const el = document.querySelector('.box');

el.classList.add('active');         // Legg til klasse
el.classList.remove('hidden');      // Fjern klasse
el.classList.toggle('selected');    // Legg til/fjern (veksle)
el.classList.contains('active');    // Sjekk om klassen finnes (true/false)

/* I CSS-filen din */
.active {
    background: green;
    color: white;
}

.hidden {
    display: none;
}

Anbefaling

Bruk classList og CSS-klasser fremfor inline styles. Det er ryddigere, lettere å vedlikeholde, og holder stil-logikken i CSS der den hører hjemme.

Endre attributter

getAttribute og setAttribute

Les og endre HTML-attributter på noder i treet.

const img = document.querySelector('img');

// Les attributt
const src = img.getAttribute('src');

// Sett attributt
img.setAttribute('src', 'nytt-bilde.jpg');
img.setAttribute('alt', 'Beskrivelse av bildet');

// Fjern attributt
img.removeAttribute('title');

Vanlige attributter kan også nås direkte som egenskaper:

img.src = 'annet-bilde.jpg';
img.alt = 'Ny beskrivelse';

data-attributter

HTML-elementer kan ha egendefinerte attributter som starter med data-:

<div id="user" data-id="123" data-role="admin"></div>

const user = document.querySelector('#user');

// Les
const userId = user.dataset.id;       // "123"
const role = user.dataset.role;        // "admin"

// Skriv
user.dataset.status = 'active';

Opprette og fjerne elementer

Å lage nye elementer følger tre steg: opprett, sett sammen, koble til.

createElement

Lager et nytt nodeobjekt – men det er frakoblet fra DOM-en. Det eksisterer i minnet men er ikke synlig.

const newDiv = document.createElement('div');
newDiv.textContent = 'Hei!';
newDiv.classList.add('message');

appendChild

Kobler et element til treet som siste barn av et annet element. Først da blir det synlig.

const container = document.querySelector('#container');
container.appendChild(newDiv);

Komplett eksempel

Slik bygger du et element med barn – samme mønster som i to-do-appen:

// 1. Opprett elementene
const newTask = document.createElement('li');
const taskText = document.createElement('span');
const deleteBtn = document.createElement('button');

// 2. Sett egenskaper
taskText.textContent = 'Handle mat';
deleteBtn.textContent = 'X';
deleteBtn.classList.add('delete-btn');

// 3. Sett sammen (koble barna til forelderen)
newTask.appendChild(taskText);
newTask.appendChild(deleteBtn);

// 4. Koble til DOM-en (nå blir det synlig)
taskList.appendChild(newTask);

Andre metoder for å legge til

const parent = document.querySelector('#parent');
const newEl = document.createElement('p');
newEl.textContent = 'Nytt avsnitt';

parent.appendChild(newEl);      // Legg til som siste barn
parent.prepend(newEl);          // Legg til som første barn

const target = document.querySelector('#target');
parent.insertBefore(newEl, target);  // Legg til før et bestemt element

Fjerne elementer

// Fjern direkte
element.remove();

// Fjern via forelderen
parent.removeChild(element);

Hendelser

DOM-elementer kan reagere på ting som skjer – klikk, tastetrykk, musebevegelser. Du kobler en funksjon til en hendelse med addEventListener:

const btn = document.querySelector('#myButton');

btn.addEventListener('click', function() {
    console.log('Knappen ble klikket!');
});

Hendelser er et stort tema med mange muligheter – les mer på Events-siden

Traversering

Traversering er å navigere mellom noder i DOM-treet – fra forelder til barn, fra søsken til søsken.

const item = document.querySelector('.item');

// Forelder
item.parentElement;

// Barn
item.children;                // Alle barn
item.firstElementChild;       // Første barn
item.lastElementChild;        // Siste barn

// Søsken
item.nextElementSibling;      // Neste søsken
item.previousElementSibling;  // Forrige søsken

Eksempel med denne HTML-en:

<ul id="list">
    <li>Første</li>
    <li class="item">Andre</li>
    <li>Tredje</li>
</ul>

const item = document.querySelector('.item');

item.parentElement;              // → <ul id="list">
item.nextElementSibling;         // → <li>Tredje</li>
item.previousElementSibling;     // → <li>Første</li>

Eksempel: Dynamisk liste

Et komplett eksempel som kombinerer velging, oppretting og hendelser:

index.htmlscript.js

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Dynamisk liste</title>
</head>
<body>
    <input id="itemInput" placeholder="Skriv noe...">
    <button id="addBtn">Legg til</button>
    <ul id="itemList"></ul>
    <script src="script.js"></script>
</body>
</html>

const input = document.querySelector('#itemInput');
const addBtn = document.querySelector('#addBtn');
const list = document.querySelector('#itemList');

addBtn.addEventListener('click', function() {
    const text = input.value.trim();

    if (text) {
        const li = document.createElement('li');
        li.textContent = text;
        list.appendChild(li);
        input.value = '';
    }
});

Se DOM-referansen for en komplett oversikt over alle metoder.