JAVASCRIPT Tutorial

Introduktion till DOM

Vad är DOM?

  • DOM (Document Object Model) är en programmeringsgränssnitt som representerar HTML i form av ett träd.
  • Det tillåter JavaScript att ändra, lägga till eller ta bort element i HTML-dokumentet.

HTML-dokument som trädstruktur

  • HTML-dokumentet visas som en trädstruktur, där varje del är en nod.
  • Noder: Grundläggande byggstenar i DOM-trädet.
  • Element: Noder som representerar HTML-element, t.ex. <div> eller <p>.
  • Attribut: Information kopplad till element, t.ex. id eller class.
  • Text: Noder som representerar textinnehållet i ett HTML-dokument.

Interaktion med DOM

  • JavaScript kan interagera med DOM med hjälp av API, såsom:
    • document.getElementById(): Hittar element baserat på ID.
    • element.innerText: Ändrar textinnehållet i ett element.
    • element.classList.add(): Lägger till en CSS-klass i ett element.

JavaScript-exempel

// Hämta elementet med ID "paragraph"
const paragraph = document.getElementById("paragraph");

// Ändra textinnehållet i stycket
paragraph.innerText = "Detta är en ny text";

// Lägg till en CSS-klass till stycket
paragraph.classList.add("important");

Tips för tillgänglighet

  • Använd rätt semantiska element (t.ex. <header>, <main>, <footer>).
  • Lägg till alt-text till bilder för användare av skärmläsare.
  • Håll DOM-strukturen snygg och organiserad.