JavaScript HTML DOM


Innehållsförteckning

    Visa innehållsförteckning


Med HTML DOM kan JavaScript komma åt och ändra alla element i en HTML dokumentera.


HTML DOM (Document Object Model)

När en webbsida laddas skapar webbläsaren ett Dokument Object Model av sidan.

HTML DOM-modellen är konstruerad som ett träd av Objekt:

HTML DOM-trädet med objekt

Med objektmodellen får JavaScript all kraft det behöver för att skapa dynamisk HTML:

  • JavaScript kan ändra alla HTML-element på sidan

  • JavaScript kan ändra alla HTML-attribut på sidan

  • JavaScript kan ändra alla CSS-stilar på sidan

  • JavaScript kan ta bort befintliga HTML-element och attribut

  • JavaScript kan lägga till nya HTML-element och attribut

  • JavaScript kan reagera på alla befintliga HTML-händelser på sidan

  • JavaScript kan skapa nya HTML-händelser på sidan


Vad du kommer att lära dig

I nästa kapitel i denna handledning kommer du att lära dig:

  • Hur man ändrar innehållet i HTML-element

  • Hur man ändrar stilen (CSS) för HTML-element

  • Hur man reagerar på HTML DOM-händelser

  • Hur man lägger till och tar bort HTML-element



Vad är DOM?

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

DOM definierar en standard för åtkomst till dokument:

"W3C Document Object Model (DOM) är en plattform och språkneutral gränssnitt som tillåter program och skript att dynamiskt komma åt och uppdatera innehåll, struktur och stil för ett dokument."

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

  • Core DOM - standardmodell för alla dokumenttyper

  • XML DOM - standardmodell för XML-dokument

  • HTML DOM - standardmodell för HTML-dokument

Vad är HTML DOM?

HTML DOM är en standard objekt modell och programmeringsgränssnitt för HTML. Den definierar:

  • HTML-elementen som objekt

  • egenskaper för alla HTML-element

  • metoderna för att komma åt alla HTML-element

  • händelserna för alla HTML-element

Med andra ord: HTML DOM är en standard för hur man hämtar, ändrar, lägger till eller tar bort HTML-element.