JavaScript HTML DOM

Genom HTML DOM kan JavaScript komma åt och ändra alla element i HTML-dokumentet.

HTML DOM (dokumentobjektmodell)

När en webbsida laddas, skapar webbläsaren dokumentobjektmodellen (DOM) för sidan (Document Object Model).

HTML DOM Modellen är strukturerad somObjektträd:

Objektets HTML DOM-träd

DOM HTML trädet

Genom denna objektmodell får JavaScript alla möjligheter att skapa dynamisk HTML:

  • JavaScript kan ändra alla HTML-element på sidan
  • JavaScript kan ändra alla HTML-egenskaper på sidan
  • JavaScript kan ändra alla CSS-stilar på sidan
  • JavaScript kan ta bort befintliga HTML-element och egenskaper
  • JavaScript kan lägga till nya HTML-element och egenskaper
  • JavaScript kan reagera på alla befintliga HTML-händelser på sidan
  • JavaScript kan skapa nya HTML-händelser på sidan

Vad kommer du att lära dig

I de följande kapitlen i denna handledning kommer du att lära dig:

  • Hur man ändrar innehållet i HTML-element
  • Hur ändrar man stilen på HTML-element (CSS)
  • Hur reagerar man på HTML DOM-händelser
  • Hur lägger man till och tar bort HTML-element

Vad är DOM?

DOM är ett W3C (World Wide Web Consortium) standard.

DOM definierar standarden för åtkomst till dokument:

”W3C Document Object Model (DOM) är en plattformsoberoende och språkneutral gränssnitt som tillåter program och skript att dynamiskt komma åt, uppdatera innehållet, strukturen och stilen på dokument.”

W3C DOM-standarden är uppdelad i 3 olika delar:

  • Core DOM - Standardmodellen för alla dokumenttyper
  • XML DOM - Standardmodellen för XML-dokument
  • HTML DOM - Standardmodellen för HTML-dokument

Vad är HTML DOM?

HTML DOM är en standard för HTMLobjektmodeller ochprogrammeringsgränssnitt. Det definierar:

  • somobjektHTML-element
  • alla HTML-elementegenskaper
  • åtkomst till alla HTML-elementmetoder
  • alla HTML-elementEvenemang

Detta innebär att HTML DOM är en standard för hur man får tag på, ändrar, lägger till eller tar bort HTML-element.