DOM-apiet

MDN:

• Oversikt over DOM- og HTML-interfaces

Javascript gir oss et rikt API mot DOMen via document-objektet. Hvis HTML-en inneholder dette...

<img id="mainpicture" src="http://placekitten.com/200/300">

... så kan vi aksessere den slik:

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

<div id="boks">
    <a href="mer.html">Klikk her</a> for å lære mer
</div>

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

boks.innerHTML; // <a href="mer.html">Klikk her</a> for å lære mer
boks.textContent; // Klikk her for å lære mer

Hendelser

Med DOM-apiet kan vi også legge til hendelser når noe skjer med et DOM-element. Vi gjør dette ved å legge på lyttere som venter på at en gitt hendelse skal skje, f.eks. et klikk på en knapp:

document.querySelector('#boks').addEventListener('click', function() {
    // Gjør noe gøy når boks har blitt trykket på!
});

Vi kan også erstatte innhold med noe annet. Kjør den følgende kodesnutten i consolet på denne siden. Ser du ut fra koden hva som skjer når du nå trykker på bildet av apen?

document.querySelector('#danse-ape').addEventListener('click', function() {
    const el = document.querySelector('#danse-ape');
    const src = el.getAttribute('src').replace('.png', '.gif');
    el.setAttribute('src', src);
});

Oppgaver

• Test ut DOM-apiet

• Fortsett med knappene du lagde i kapittel 2.

  • Legg til unike id-attributter på output og button-elementene.
  • Legg til hendelseshåndtering av knappene i JS-filen du lagde i forrige seksjon. Legg til en click event handler som legger til 1 på tallet i output når man trykker på plussknappen.
  • Legg til en click event handler som trekker fra 1 fra tallet i output når man trykker på minusknappen.