Visualiseringer
Interaktive illustrasjoner som viser hva som skjer bak kulissene i nettleseren.
DOM: Nettleseren bygger et tre
Denne interaktive illustrasjonen viser hva som skjer når nettleseren leser HTML-filen din. Klikk "Neste" for å se nettleseren lese gjennom koden linje for linje og bygge et tre av objekter i minnet.
Hva du nettopp så
Nettleseren leste HTML-filen din én gang og bygde et tre av objekter i minnet. Hver tag ble til en node – et objekt med egenskaper som textContent og id. Fra nå av er det dette treet nettleseren jobber med, ikke filen din.
JavaScript søker i treet
Du har brukt getElementById i koden din. Men hva skjer egentlig? Denne illustrasjonen viser hvordan JavaScript søker gjennom DOM-treet for å finne riktig element.
Hva du nettopp så
document.getElementById('melding') søker gjennom DOM-treet – ikke HTML-filen din. Den sjekker hvert elements id-egenskap til den finner en match. Variabelen message er en lapp som peker på det objektet – den inneholder det ikke.
JavaScript endrer treet, ikke filen
Du har sett at message peker på p-objektet i DOM-treet. Men hva skjer når du skriver message.textContent = 'Hei, Ola!'? Endringen skjer i treet i minnet – HTML-filen din forblir uendret.
Hva du nettopp så
message.textContent = 'Hei, Ola!' endrer objektet i DOM-treet, ikke HTML-filen. Filen ble lest én gang da nettleseren bygde treet – etter det jobber JavaScript kun med treet i minnet.
Se treet selv: DevTools
DOM-treet vi har sett i animasjonene er ikke bare en illustrasjon. Du kan se nøyaktig det samme treet i nettleserens utviklerverktøy.
Prøv selv
Åpne utviklerverktøyene i nettleseren din (F12 eller høyreklikk → Inspiser). Elements-panelet viser DOM-treet – med alle JavaScript-endringer. Vis kildekode (Ctrl+U) viser den originale filen.
Lage et nytt element
Du har brukt createElement i to-do-appen din. Men hva skjer egentlig? Denne illustrasjonen viser at createElement lager et nytt objekt i minnet – frakoblet fra DOM-treet.
Hva du nettopp så
createElement lager et nytt objekt i minnet – det dukker ikke opp på siden av seg selv. Elementet må kobles til DOM-treet (med appendChild) for å bli synlig. Inntil da er det bare data i minnet.
Koble det til DOM-en
Elementene er opprettet – men de er ikke synlige ennå. Hva skjer når du kobler dem til DOM-treet med appendChild?
Hva du nettopp så
appendChild kobler noder til treet. Først satte vi sammen et lite tre (li → span + button). Så koblet vi det til DOM-en via ul#task-list. Først da ble elementet synlig på nettsiden. Filen din er fortsatt uendret – alt skjer i minnet.