DOM-referanse

Oppslagsverk for DOM-metoder og -egenskaper. Organisert etter oppgave.

Trenger du forklaring?

Denne siden er et oppslagsverk – den forklarer hva, ikke hvorfor. Hvis du vil forstå hva DOM-en er og hvordan den fungerer, start med Hva er DOM-en?

Velge elementer

Metode	Beskrivelse	Returnerer
`document.getElementById(id)`	Finn element med ID	Element eller `null`
`document.querySelector(sel)`	Finn første match for CSS-selektor	Element eller `null`
`document.querySelectorAll(sel)`	Finn alle matcher for CSS-selektor	NodeList

const el = document.getElementById('title');
const btn = document.querySelector('.btn');
const items = document.querySelectorAll('li');

Loop gjennom NodeList:

items.forEach(function(item) {
    console.log(item.textContent);
});

Endre innhold

Egenskap	Beskrivelse	Merknad
`el.textContent`	Les/sett tekstinnhold	Trygt – all tekst behandles som ren tekst
`el.innerHTML`	Les/sett HTML-innhold	Tolker tagger – unngå med brukerinput

el.textContent = 'Ren tekst';
el.innerHTML = '<strong>Med</strong> HTML';

Endre attributter

Metode / egenskap	Beskrivelse
`el.getAttribute(name)`	Les attributtverdi
`el.setAttribute(name, value)`	Sett attributtverdi
`el.removeAttribute(name)`	Fjern attributt
`el.src`, `el.alt`, `el.href`	Direkte tilgang til vanlige attributter
`el.dataset.name`	Les/skriv `data-*` attributter

el.setAttribute('src', 'bilde.jpg');
const role = el.dataset.role;   // fra data-role="..."
el.dataset.status = 'active';   // setter data-status="active"

Endre stil

Inline styles

Egenskap	CSS-ekvivalent
`el.style.color`	`color`
`el.style.backgroundColor`	`background-color`
`el.style.fontSize`	`font-size`
`el.style.borderRadius`	`border-radius`
`el.style.display`	`display`
`el.style.zIndex`	`z-index`

el.style.backgroundColor = 'blue';

classList

Metode	Beskrivelse
`el.classList.add('klasse')`	Legg til klasse
`el.classList.remove('klasse')`	Fjern klasse
`el.classList.toggle('klasse')`	Legg til / fjern (veksle)
`el.classList.contains('klasse')`	Sjekk om klassen finnes → `true`/`false`
`el.classList.replace('gammel', 'ny')`	Bytt ut klasse

el.classList.add('active');
el.classList.toggle('hidden');

Opprette elementer

Metode	Beskrivelse
`document.createElement(tag)`	Lag nytt element (frakoblet)
`parent.appendChild(child)`	Legg til som siste barn
`parent.prepend(child)`	Legg til som første barn
`parent.insertBefore(new, ref)`	Legg til før et bestemt element

const el = document.createElement('div');
el.textContent = 'Ny';
el.classList.add('message');
container.appendChild(el);

Fjerne elementer

Metode	Beskrivelse
`el.remove()`	Fjern elementet fra DOM-en
`parent.removeChild(child)`	Fjern barn via forelderen

el.remove();

Traversering

Egenskap	Beskrivelse
`el.parentElement`	Forelderen
`el.children`	Alle barn (HTMLCollection)
`el.firstElementChild`	Første barn
`el.lastElementChild`	Siste barn
`el.nextElementSibling`	Neste søsken
`el.previousElementSibling`	Forrige søsken

const parent = el.parentElement;
const next = el.nextElementSibling;
const kids = el.children;

Hendelser

Metode	Beskrivelse
`el.addEventListener(type, fn)`	Koble funksjon til hendelse
`el.removeEventListener(type, fn)`	Fjern hendelseslytter
`event.target`	Elementet som utløste hendelsen
`event.preventDefault()`	Forhindre standard oppførsel

btn.addEventListener('click', function(event) {
    console.log(event.target);
});

Vanlige hendelsestyper

Type	Utløses når
`click`	Museklikk
`dblclick`	Dobbeltklikk
`mouseover` / `mouseout`	Mus over / forlater
`keydown` / `keyup`	Tast ned / opp
`input`	Input-verdi endres (live)
`change`	Input mister fokus etter endring
`submit`	Skjema sendes
`focus` / `blur`	Element får / mister fokus
`load`	Side eller bilde ferdig lastet

Se Events-siden for detaljer om hendelseshåndtering, event-objektet, tastatur-events og skjema-events.