HTML-SKOLA Lektion 10: JavaScript och DOM-manipulation - Skapa dynamiskt innehåll

Välkommen till den tionde och sista lektionen i vår HTML-kurs! Nu när vi har lärt oss hur man använder JavaScript för att lägga till interaktivitet, är det dags att ta det ett steg längre och verkligen dyka in i hur vi kan använda JavaScript för att manipulera själva strukturen av vår webbsida. Detta gör vi genom att arbeta med DOM – Document Object Model. Låt oss se hur vi kan använda DOM-manipulation för att göra våra webbsidor ännu mer dynamiska!

Vad är DOM?

DOM (Document Object Model) är en representation av HTML-dokumentet som gör det möjligt för JavaScript att interagera med och manipulera innehållet på sidan. När en webbsida laddas skapas en DOM-trädstruktur som representerar alla element på sidan – rubriker, bilder, stycken, länkar, formulär, etc. Med JavaScript kan vi navigera, läsa och ändra element i detta träd, vilket innebär att vi kan uppdatera innehållet på sidan utan att behöva ladda om den.

Hur fungerar DOM-manipulation?

För att manipulera DOM måste vi kunna välja de element vi vill arbeta med och sedan ändra eller lägga till nya element. Här är några vanliga metoder för att välja och ändra element:

Välja element

För att kunna ändra något på sidan måste vi först välja elementet i DOM. JavaScript erbjuder flera sätt att välja element:

getElementById(): Väljer ett element baserat på dess id-attribut.

  let rubrik = document.getElementById("rubrik");

getElementsByClassName(): Väljer alla element som har en viss klass.

  let paragrafer = document.getElementsByClassName("min-klass");

getElementsByTagName(): Väljer alla element av en viss tagg.

  let allaParagrafer = document.getElementsByTagName("p");

querySelector(): Väljer det första elementet som matchar en CSS-selektor.

  let knapp = document.querySelector("button");

querySelectorAll(): Väljer alla element som matchar en CSS-selektor.

  let allaListElement = document.querySelectorAll("li");

Ändra innehåll och stil

När vi har valt ett element kan vi ändra dess innehåll, attribut eller stil.

Ändra innehåll: Med innerHTML kan vi ändra innehållet i ett element.

  rubrik.innerHTML = "Detta är en ny rubrik";

Ändra stil: Med style kan vi ändra CSS-egenskaper.

  rubrik.style.color = "blue";
  rubrik.style.fontSize = "24px";

Ändra attribut: Med setAttribute() kan vi ändra elementets attribut.

  let bild = document.getElementById("minBild");
  bild.setAttribute("src", "nyBild.jpg");

Lägg till och ta bort element

Med JavaScript kan vi också lägga till nya element eller ta bort existerande element från sidan.

Lägg till element: För att lägga till ett nytt element skapar vi först elementet och sedan lägger vi till det i DOM med appendChild().

  let nyttElement = document.createElement("p");
  nyttElement.innerHTML = "Detta är ett nytt stycke.";
  document.body.appendChild(nyttElement);

Ta bort element: För att ta bort ett element använder vi removeChild().

  let container = document.getElementById("container");
  let barnElement = document.getElementById("rubrik");
  container.removeChild(barnElement);

Praktisk övning: Skapa en dynamisk lista

Nu ska vi använda våra kunskaper om DOM-manipulation för att skapa en dynamisk lista där användaren kan lägga till och ta bort objekt. Följ dessa steg:

Skapa en HTML-sida med en input-fält och två knappar: en för att lägga till ett objekt och en för att ta bort det sista objektet i listan.
Använd JavaScript för att lägga till och ta bort objekt i listan dynamiskt när användaren klickar på knapparna.

Här är ett exempel:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamisk lista</title>
    <script>
      function laggTillObjekt() {
        let input = document.getElementById("nyttObjekt").value;
        if (input !== "") {
          let nyttLi = document.createElement("li");
          nyttLi.innerHTML = input;
          document.getElementById("lista").appendChild(nyttLi);
          document.getElementById("nyttObjekt").value = "";
        }
      }

      function taBortSistaObjektet() {
        let lista = document.getElementById("lista");
        if (lista.lastElementChild) {
          lista.removeChild(lista.lastElementChild);
        }
      }
    </script>
  </head>
  <body>
    <h1>Min dynamiska lista</h1>
    <input type="text" id="nyttObjekt" placeholder="Skriv ett nytt objekt">
    <button onclick="laggTillObjekt()">Lägg till</button>
    <button onclick="taBortSistaObjektet()">Ta bort sista</button>
    <ul id="lista"></ul>
  </body>
</html>

Med detta exempel kan användaren skriva in text i input-fältet och sedan klicka på ”Lägg till” för att lägga till ett nytt objekt i listan. Knappen ”Ta bort sista” tar bort det senaste objektet i listan. Detta är ett utmärkt sätt att öva på hur man manipulerar DOM och gör sidan dynamisk och användarvänlig!

Sammanfattning

I denna sista lektion har vi introducerat DOM-manipulation och hur du kan använda JavaScript för att dynamiskt ändra och skapa innehåll på dina webbsidor. Vi har lärt oss hur man väljer element i DOM, ändrar deras innehåll och stil, samt lägger till och tar bort element.

DOM-manipulation är en av de viktigaste färdigheterna inom webbutveckling, eftersom det gör att dina webbsidor kan anpassa sig efter användarens interaktion och bli mycket mer engagerande. Det är en stor del av vad som skiljer statiska webbsidor från dynamiska, interaktiva upplevelser.

Nu när du har alla verktyg – HTML, CSS och JavaScript – kan du bygga inte bara snygga webbsidor utan också sidor som verkligen interagerar med användarna och förändras dynamiskt. Fortsätt att experimentera och utveckla dina färdigheter, och kom ihåg: övning är nyckeln till att bli en skicklig utvecklare.

Tack för att du har följt med på denna resa genom grunderna av webbutveckling! Nu är det dags att ta dina nya kunskaper och börja skapa dina egna fantastiska projekt. Lycka till och ha kul med kodandet!