Når du åpner en nettside ser du HTML gjort om til en synlig side. I bakgrunnen lager nettleseren en usynlig modell kalt DOM – Document Object Model.
DOM er en kopi av HTML som JavaScript kan lese og endre. Nettleseren bygger et DOM-tre der hvert HTML-element (som <body>, <h1>, <p>) blir en node i treet
JavaScript bruker dette treet for å endre tekst, farge, skjule elementer eller lage knapper som reagerer.
Nettleseren tolker HTML og lager et DOM-tre. Eksempel:
<body>
<h1 id="header">Velkommen!</h1>
<p id="tekst">Dette er en test.</p>
<button id="knapp">Klikk meg</button>
</body>DOM-treet ser slik ut:
body
├── h1#header ("Velkommen!")
├── p#tekst ("Dette er en test.")
└── button#knapp ("Klikk meg")Nå kan vi bruke JavaScript til å hente ut disse elementene og gjøre hva vi vil med dem!
getElementById er en metode i JavaScript som lar deg hente et bestemt HTML-element – ved å bruke id-en til elementet. Etter du har hentet et element kan du forandre farge og innhold, og mye mer.
For å forandre på teksten til <h1>-tagen fra koden ovenfor, kan vi skrive følgende i JavaScript
let overskrift = document.getElementById("header");
overskrift.textContent = "Velkommen til DOM-manipulering";Her skjer to ting:
1) Vi lager variabelen overskrift som peker til <h1 id="header">.
2) Vi endrer innholdet med textContent.
Prøv å endre teksten selv i den interaktive javascript-editoren nedenfor og trykk på Lagre JavaScript.
Loading editor...
let overskrift = document.getElementById("header");
overskrift.textContent = "Velkommen til DOM-manipulering";Merk: getElementById returnerer kun det første elementet med den id-en.
DOM lar deg også reagere på brukerens handlinger med for eksempel knapper. Her har jeg brukt samme HTML som over, men endret på scriptet for å inkludere en event-listener, som kjører en funksjon dersom man klikker på knappen.
Loading editor...
let button = document.getElementById("knapp");
let description = document.getElementById("tekst");
button.addEventListener("click", function() {
description.textContent = "Teksten har blitt endret!";
});Her kobler vi en click-hendelse til knappen. Når brukeren klikker, endres teksten i <p>-elementet.
<p>-element), og bruk JavaScript til å endre fargen på teksten når du klikker på en knapp. Hint: Bruk <p>.style.color for å endre farge-display som kan være none eller block<span>-element.