JavaScript HTML DOM

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

HTML DOM (document object model)

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 makt 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 en W3C (World Wide Web Consortium) standard.

DOM definierar standarder för att komma åt dokumentet:

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

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

  • Core DOM - standardmodellen för alla dokumenttyper
  • XML DOM - XML-dokumentets standardmodell
  • HTML DOM - HTML-dokumentets standardmodell

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 hämtar, ändrar, lägger till eller tar bort HTML-element.