DOM-manipuleringstekniker

DOM (Document Object Model) är ett gränssnitt som gör det möjligt för program att dynamiskt ändra innehållet och strukturen för webbsidor. Här är några viktiga tekniker för DOM-manipulering:

• Skapa element:

const nyttElement = document.createElement("div");

• Lägg till ett element:

document.body.appendChild(nyttElement);

• Ta bort ett element:

document.body.removeChild(nyttElement);

• Lägg till ett element innan ett annat:

document.body.insertBefore(nyttElement, befintligtElement);

• Sätt ett attribut:

nyttElement.setAttribute("id", "mittElement");

• Hämta ett attribut:

const id = nyttElement.getAttribute("id");

• Hantera klasser:

nyttElement.classList.add("klass1", "klass2");
nyttElement.classList.remove("klass1");
nyttElement.classList.toggle("aktiverad");

JavaScript-exempel:

const knapp = document.getElementById("minKnapp");
knapp.addEventListener("click", () => {
  const nyttElement = document.createElement("p");
  nyttElement.textContent = "Ett nytt element har lagts till";
  document.body.appendChild(nyttElement);
});

För tillgänglighet och användarvänlighet:

• Använd ARIA-attribut för att göra element tillgängliga för hjälpmedel.
• Fokusera på innehållet och använd semantik korrekt.
• Testa dina DOM-manipuleringar för att säkerställa kompatibilitet och tillgänglighet.