JavaScript HTML DOM

Gennem HTML DOM kan JavaScript få adgang til og ændre alle elementer i HTML-dokumentet.

HTML DOM (Dokumentobjektmodel)

Når en webside loaderes, opretter browseren dokumentobjektmodellen (DOM) for siden.Document Object Model).

HTML DOM Modellen struktureres somObjekttræ:

Objektets HTML DOM-træ

DOM HTML træ

Gennem denne objektmodel får JavaScript alle kræfter til at oprette dynamisk HTML:

  • JavaScript kan ændre alle HTML-elementer på siden
  • JavaScript kan ændre alle HTML-egenskaber på siden
  • JavaScript kan ændre alle CSS-styler på siden
  • JavaScript kan slette eksisterende HTML-elementer og egenskaber
  • JavaScript kan tilføje nye HTML-elementer og egenskaber
  • JavaScript kan reagere på alle eksisterende HTML-hændelser på siden
  • JavaScript kan oprette nye HTML-hændelser på siden

Hvad vil du lære

I de følgende kapitler af denne vejledning vil du lære:

  • Hvordan ændre indholdet af HTML-elementer
  • Hvordan ændrer man stilen på HTML-elementer (CSS)
  • Hvordan reagerer man på HTML DOM-eventer
  • Hvordan tilføjer og sletter man HTML-elementer

Hvad er DOM?

DOM er en W3C (World Wide Web Consortium) standard.

DOM definerer standarder for adgang til dokumentet:

“W3C Dokumentobjektmodellen (DOM) er en platformuafhængig og sprogneutral grænseflade, der muliggør programmer og skript dynamisk at få adgang til, opdatere indholdet, strukturen og stilen i dokumentet.”

W3C DOM-standarden er opdelt i 3 forskellige dele:

  • Core DOM - Standardmodellen for alle dokumenttyper
  • XML DOM - Standardmodellen for XML-dokumenter
  • HTML DOM - Standardmodellen for HTML-dokumenter

Hvad er HTML DOM?

HTML DOM er standarden for HTMLobjekterogprogrammeringsgrænseflader. Det definerer:

  • somobjekterHTML elementers
  • alle HTML elementersegenskaber
  • adgang til alle HTML elementersmetoder
  • alle HTML elementersEventer

Kort sagt: HTML DOM er standarden for, hvordan man får adgang til, ændrer, tilføjer eller sletter HTML-elementer.