jakubszpil

Czym jest DOM?

#Wprowadzenie

DOM (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML. Umożliwia dynamiczne manipulowanie strukturą, stylem i treścią dokumentów. DOM reprezentuje dokument jako drzewo obiektów, gdzie każdy element, atrybut i tekst w dokumencie jest węzłem drzewa.

#Struktura DOM

DOM przedstawia dokument HTML jako drzewo hierarchiczne:

<!DOCTYPE html>
<html>
  <head>
    <title>Przykład DOM</title>
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
    <p>To jest akapit.</p>
  </body>
</html>

Powyższy dokument HTML jest reprezentowany w DOM jako:

#document
   |
   +-- html
        |
        +-- head
        |     |
        |     +-- title
        |            |
        |            +-- "Przykład DOM"
        |
        +-- body
              |
              +-- h1
              |     |
              |     +-- "Witaj, świecie!"
              |
              +-- p
                    |
                    +-- "To jest akapit."

#Podstawowe operacje na DOM

DOM udostępnia wiele metod do manipulacji dokumentem. Oto kilka przykładów:

#Wybieranie elementów

#getElementById

Wybiera element na podstawie jego identyfikatora (ID):

<p id="myParagraph">To jest akapit.</p>

<script>
  const para = document.getElementById("myParagraph");
  console.log(para.textContent); // "To jest akapit."
</script>

#getElementsByClassName

Wybiera wszystkie elementy z określoną klasą:

<p class="myClass">Akapit 1</p>
<p class="myClass">Akapit 2</p>

<script>
  const paras = document.getElementsByClassName("myClass");
  console.log(paras.length); // 2
</script>

#querySelector i querySelectorAll

Wybiera elementy za pomocą selektorów CSS:

<p class="myClass">Akapit 1</p>
<p class="myClass">Akapit 2</p>

<script>
  const firstPara = document.querySelector(".myClass");
  console.log(firstPara.textContent); // "Akapit 1"

  const allParas = document.querySelectorAll(".myClass");
  console.log(allParas.length); // 2
</script>

#Manipulacja elementami

#Zmiana tekstu

<p id="myParagraph">To jest akapit.</p>

<script>
  const para = document.getElementById("myParagraph");
  para.textContent = "Zmieniony tekst akapitu.";
</script>

#Zmiana atrybutów

<img id="myImage" src="image.jpg" alt="Obrazek" />

<script>
  const img = document.getElementById("myImage");
  img.src = "newImage.jpg";
  img.alt = "Nowy obrazek";
</script>

#Dodawanie elementów

<ul id="myList">
  <li>Element 1</li>
</ul>

<script>
  const list = document.getElementById("myList");
  const newItem = document.createElement("li");
  newItem.textContent = "Element 2";
  list.appendChild(newItem);
</script>

#Usuwanie elementów

<p id="myParagraph">To jest akapit.</p>

<script>
  const para = document.getElementById("myParagraph");
  para.remove();
</script>

#Zadania do wykonania

#Zadanie 1

Napisz kod HTML z listą (ul) i trzema elementami (li). Następnie za pomocą JavaScript dodaj czwarty element do listy.

Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista</title>
  </head>
  <body>
    <ul id="myList">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
    </ul>
    <script>
      const list = document.getElementById("myList");
      const newItem = document.createElement("li");
      newItem.textContent = "Element 4";
      list.appendChild(newItem);
    </script>
  </body>
</html>

#Zadanie 2

Utwórz formularz z polem tekstowym i przyciskiem. Po kliknięciu przycisku zmień tekst przycisku na "Wysłano".

Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formularz</title>
  </head>
  <body>
    <form id="myForm">
      <input type="text" id="myInput" />
      <button type="button" id="myButton">Wyślij</button>
    </form>
    <script>
      const button = document.getElementById("myButton");
      button.addEventListener("click", () => {
        button.textContent = "Wysłano";
      });
    </script>
  </body>
</html>

#Zadanie 3

Napisz kod HTML z obrazkiem. Za pomocą JavaScript zmień źródło obrazka na nowe po kliknięciu na niego.

Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Obrazek</title>
  </head>
  <body>
    <img id="myImage" src="image.jpg" alt="Obrazek" />
    <script>
      const img = document.getElementById("myImage");
      img.addEventListener("click", () => {
        img.src = "newImage.jpg";
      });
    </script>
  </body>
</html>

#Zadanie 4

Utwórz stronę HTML z trzema akapitami. Użyj JavaScript, aby zmienić kolor tekstu wszystkich akapitów na niebieski.

Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kolor tekstu</title>
  </head>
  <body>
    <p>Akapit 1</p>
    <p>Akapit 2</p>
    <p>Akapit 3</p>
    <script>
      const paragraphs = document.querySelectorAll("p");
      paragraphs.forEach((p) => {
        p.style.color = "blue";
      });
    </script>
  </body>
</html>

To tyle na temat podstaw DOM! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu.

Widzisz jakiś błąd, bądź literówkę? Chcesz coś poprawić?✏️ Przejdź do edycji tego pliku