web-intro
  • Introduction
  • Introduksjon
    • Introduksjon
    • Din første nettside
      • Hello World
      • DevTools
  • Grunnleggende webutvikling
    • HTML
      • Elementer
      • Head og body
      • Semantikk
      • Bilder
      • Lenker
      • Knapper
      • DOM-en
    • CSS
      • Selectorer
      • Pseudo-klasser
      • Box model
      • Flyt
      • Layout
      • Responsivt
    • JavaScript
      • Filer
      • Variabler
      • Typer og operatorer
      • Strenger
      • Funksjoner
      • Listeoperasjoner
      • DOM-apiet
      • Promises
      • Async/await
      • Web-APIer
      • ESNext
      • Rammeverk
  • Neste steg
    • Universell utforming
    • React
    • Utviklingsmiljø
      • Dytt det til skyen!
    • Best practices
      • Linting og formatering
      • Code review
      • Keep it simple, stupid!
    • Flere ressurser
Powered by GitBook
On this page
  • Document Object Model (DOM)
  • CSS Object Model (CSSOM)
  1. Grunnleggende webutvikling
  2. HTML

DOM-en

PreviousKnapperNextCSS

Last updated 5 years ago

Dokumentasjon fra MDN:

Document Object Model (DOM)

DOM-en er nettleserens programmatiske representasjon av en nettside. Den er bygget opp av et node-hierarki som representerer HTML-strukturen i en objektorientert modell.

JavaScript kan bruke DOM-en til å lese, endre og overvåke en gitt nettside. Vi kan bruke de eksponerte objektene document og window til dette. Mer om dette i

DOM-en til den følgende html-siden er som vist under:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>All About Cats</title>
    </head>
    <body>
        <h1>CATS!</h1>
        <img
            id="mainpicture"
            src="http://placekitten.com/200/300"
        />
      <p>So cute!</p>
      <ul>
          <li class="catname">Lizzie</li>
          <li class="catname">Daemon</li>
      </ul>
   </body>
</html>

CSS Object Model (CSSOM)

Tilsvarende har vi CSS Object Model som lar oss manipulere CSS med JavaScript. CSSOM-en har som DOM-en en trestruktur som representerer CSS-reglene som gjelder for siden. Når nettleseren skal forstå hvilken regel som gjelder for en node vil den navigere treet fra den mest generelle regelen som treffer noden rekursivt ned til den mest spesifikke regelen som skal brukes.

dom-tree
Introduction to the DOM
CSS Object Model
delen om JavaScript