Moduł III – Model DOM i Microdata (3 godz.)
Kurs HTML5, CSS3 i JavaScript – Zespół Szkół w Sokołowie Małopolskim

Moduł 3 — Model DOM i Microdata (3 godz.)

1. Model DOM — jak przeglądarka widzi stronę

🌳 DOM (Document Object Model) to sposób, w jaki przeglądarka "widzi" Twoją stronę. Możesz wyobrazić sobie stronę HTML jako drzewo – każdy nagłówek, akapit, obrazek czy przycisk to gałązka lub liść tego drzewa.

Dzięki DOM JavaScript może "rozmawiać" ze stroną – zmieniać tekst, kolory, dodawać nowe elementy lub usuwać je bez przeładowania strony.

Najprostsze sposoby, żeby JavaScript znalazł coś na stronie:

• getElementById("id") – znajdź element po jego identyfikatorze. Przykład: document.getElementById("naglowek")
• querySelector("selektor") – znajdź pierwszy element pasujący do selektora CSS, np. document.querySelector("p")
• querySelectorAll("selektor") – znajdź wszystkie pasujące elementy, np. document.querySelectorAll("li")
• children – pokaż wszystkie "dzieci" danego elementu (czyli elementy w środku), np. document.getElementById("lista").children
• parentNode – pokaż "rodzica" elementu, np. document.getElementById("item").parentNode
• Zmiana zawartości i atrybutów elementów: innerHTML (tekst + HTML), textContent (tylko tekst), setAttribute (zmiana np. koloru, linku lub klasy CSS).

💡 Pamiętaj: każda część strony to element DOM. JavaScript może je znaleźć i zmienić, dzięki czemu Twoja strona może reagować na kliknięcia, przyciski i inne działania użytkownika.

---

Praktyczne przykłady DOM w akcji

1️⃣ Zmiana tekstu nagłówka:

HTML:

<h2 id="naglowek">Witaj, świecie!</h2>
<button id="zmienTekst">Kliknij, aby zmienić nagłówek</button>

JavaScript:

document.getElementById("zmienTekst").addEventListener("click", function() {
    document.getElementById("naglowek").textContent = "Nagłówek został zmieniony!";
});

2️⃣ Zmiana koloru elementu:

<p id="paragraf">Ten tekst zmieni kolor po kliknięciu.</p>
<button id="zmienKolor">Kolor</button>

document.getElementById("zmienKolor").addEventListener("click", function() {
    document.getElementById("paragraf").style.color = "teal";
});

3️⃣ Dodawanie nowych elementów do listy:

<ul id="lista">
  <li>Jabłko</li>
  <li>Banana</li>
</ul>
<button id="dodajElement">Dodaj owoc</button>

document.getElementById("dodajElement").addEventListener("click", function() {
    const nowyElement = document.createElement("li");
    nowyElement.textContent = "Pomarańcza";
    document.getElementById("lista").appendChild(nowyElement);
});

4️⃣ Usuwanie elementu:

<li id="doUsuniecia">Usuń mnie</li>

document.getElementById("doUsuniecia").parentNode.removeChild(document.getElementById("doUsuniecia"));

Te proste przykłady pokazują, jak JavaScript może wchodzić w interakcję z DOM: zmieniać treść, kolory, dodawać i usuwać elementy. To podstawowy fundament dynamicznych stron internetowych!

2. Nowe elementy DOM w HTML5

⚡ HTML5 oraz JavaScript umożliwiają dynamiczne zarządzanie elementami strony poprzez manipulację strukturą DOM. Dzięki temu programista może tworzyć nowe elementy HTML, dodawać je do strony, usuwać, kopiować lub zmieniać ich wygląd bez przeładowania całej strony. Jest to jedna z podstaw działania nowoczesnych aplikacji internetowych.

DOM (Document Object Model) traktuje stronę internetową jak drzewo elementów. Każdy element HTML (div, p, img, button) jest w tym drzewie osobnym obiektem, którym JavaScript może zarządzać.

• Tworzenie elementów: document.createElement()
• Dodawanie do strony: appendChild(), insertBefore()
• Usuwanie elementów: remove()
• Zmiana klas CSS i atrybutów: classList.add(), classList.remove(), setAttribute()

---

1. Tworzenie nowych elementów w DOM

Aby dodać nowy element HTML do strony, najpierw trzeba go stworzyć w pamięci przeglądarki. Służy do tego funkcja:

document.createElement("tag")

Funkcja ta tworzy nowy element HTML, ale jeszcze go nie wyświetla na stronie. Najpierw trzeba go dodać do istniejącej struktury DOM.

Przykład:

let paragraf = document.createElement("p");
paragraf.textContent = "To jest nowy akapit dodany przez JavaScript.";

W tym przykładzie:

• tworzymy nowy element <p>
• ustawiamy jego treść tekstową
• element istnieje w pamięci, ale nie jest jeszcze widoczny na stronie

---

2. Dodawanie elementów do strony

Po utworzeniu elementu należy wstawić go do dokumentu HTML. Najczęściej używa się funkcji:

• appendChild() – dodaje element na końcu kontenera
• insertBefore() – dodaje element przed innym elementem

Przykład appendChild:

let kontener = document.getElementById("content");

let nowyElement = document.createElement("p");
nowyElement.textContent = "Nowy akapit wstawiony do strony.";

kontener.appendChild(nowyElement);

W tym przykładzie:

• pobieramy istniejący element o id content
• tworzymy nowy akapit
• dodajemy go na końcu tego kontenera

Przykład insertBefore:

let lista = document.getElementById("lista");
let pierwszy = lista.firstElementChild;

let nowy = document.createElement("li");
nowy.textContent = "Nowy element listy";

lista.insertBefore(nowy, pierwszy);

Ten kod wstawia nowy element listy <li> na początku listy.

---

3. Usuwanie elementów z DOM

Czasami aplikacja musi usunąć element ze strony, np. po kliknięciu przycisku „Usuń”. Do tego służy metoda:

element.remove()

Przykład:

let element = document.getElementById("reklama");
element.remove();

Po wykonaniu tego kodu element o id reklama zostanie całkowicie usunięty z dokumentu HTML.

---

4. Zmiana klas CSS w JavaScript

JavaScript może zmieniać klasy CSS elementów, co pozwala dynamicznie zmieniać wygląd strony. Do tego służy obiekt classList.

• classList.add() – dodaje klasę CSS
• classList.remove() – usuwa klasę CSS
• classList.toggle() – przełącza klasę

Przykład:

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

box.classList.add("active");

Po wykonaniu kodu element otrzyma klasę active, a przeglądarka zastosuje styl CSS zdefiniowany dla tej klasy.

---

5. Zmiana atrybutów elementów

JavaScript może również zmieniać atrybuty HTML, takie jak src, href, title czy alt.

Służy do tego metoda:

setAttribute("nazwa", "wartość")

Przykład:

let obraz = document.getElementById("foto");

obraz.setAttribute("src", "nowe_zdjecie.jpg");

Kod zmienia obraz wyświetlany na stronie poprzez podmianę adresu pliku w atrybucie src.

---

Podsumowanie

Manipulowanie DOM jest jedną z najważniejszych umiejętności w nowoczesnym programowaniu stron internetowych. Dzięki tym metodom JavaScript może dynamicznie zmieniać strukturę strony bez jej przeładowania. To właśnie w ten sposób działają interaktywne aplikacje internetowe, formularze, systemy komentarzy czy panele administracyjne.

---

Przykłady praktyczne

Poniższe przykłady pokazują praktyczne wykorzystanie manipulacji DOM w JavaScript. Kod jest wyświetlany jako przykład, aby można było go przeanalizować i przepisać podczas ćwiczeń.

---

Przykład 1 – Dodawanie nowego elementu

W tym przykładzie JavaScript tworzy nowy akapit i dodaje go do strony po kliknięciu przycisku.

<div id="content"></div>

<button onclick="dodajTekst()">Dodaj tekst</button>

<script>
function dodajTekst(){

  let paragraf = document.createElement("p");
  paragraf.textContent = "Nowy akapit dodany przez JavaScript.";

  document.getElementById("content").appendChild(paragraf);

}
</script>

---

Przykład 2 – Dynamiczna lista zadań

Ten przykład pokazuje jak JavaScript może dodawać nowe elementy listy na podstawie tekstu wpisanego przez użytkownika.

<input type="text" id="zadanie" placeholder="Wpisz zadanie">

<button onclick="dodajZadanie()">Dodaj</button>

<ul id="lista"></ul>

<script>

function dodajZadanie(){

  let tekst = document.getElementById("zadanie").value;

  let element = document.createElement("li");
  element.textContent = tekst;

  document.getElementById("lista").appendChild(element);

}

</script>

---

Przykład 3 – Usuwanie elementu

JavaScript może usunąć element ze strony przy użyciu metody remove().

<p id="reklama">To jest element do usunięcia</p>

<button onclick="usunElement()">Usuń element</button>

<script>

function usunElement(){

  let element = document.getElementById("reklama");
  element.remove();

}

</script>

---

Zmiana stylu elementów za pomocą classList

JavaScript może dynamicznie zmieniać wygląd elementów strony poprzez dodawanie lub usuwanie klas CSS. Służy do tego obiekt classList. Dzięki niemu można sterować stylami elementów bez zmiany całego kodu HTML.

Najczęściej używane metody to:

• classList.add() – dodaje klasę CSS
• classList.remove() – usuwa klasę CSS
• classList.toggle() – przełącza klasę (dodaje lub usuwa)

---

Przykład 1 – Dodawanie klasy

Metoda classList.add() dodaje klasę CSS do elementu. Po dodaniu klasy przeglądarka automatycznie zastosuje styl zdefiniowany w CSS.

<div id="box">Przykładowy element</div>

<button onclick="dodajStyl()">Dodaj styl</button>

<script>

function dodajStyl(){

  let element = document.getElementById("box");
  element.classList.add("active");

}

</script>

Po kliknięciu przycisku element otrzyma klasę active.

---

Przykład 2 – Usuwanie klasy

Metoda classList.remove() usuwa klasę CSS z elementu. Dzięki temu można przywrócić wcześniejszy wygląd elementu.

<div id="box" class="active">Element z klasą</div>

<button onclick="usunStyl()">Usuń styl</button>

<script>

function usunStyl(){

  let element = document.getElementById("box");
  element.classList.remove("active");

}

</script>

Po kliknięciu przycisku klasa active zostanie usunięta.

---

Przykład 3 – Przełączanie klasy

Metoda classList.toggle() działa jak przełącznik: jeśli element nie ma klasy active, zostanie dodana, jeśli element ją posiada – zostanie usunięta. Dzięki temu możemy dynamicznie zmieniać wygląd elementu jednym przyciskiem.

<div id="box">Kliknij przycisk</div>

<button onclick="przelaczStyl()">Przełącz styl</button>

<style>
.active{
  background:red;
  color:white;
  padding:10px;
}
</style>

<script>

function przelaczStyl(){

  let element = document.getElementById("box");
  element.classList.toggle("active");

}

</script>

Po kliknięciu przycisku klasa active będzie dodawana lub usuwana, a element zmieni swój wygląd.

---

Przykład 5 – Zmiana obrazu

Metoda setAttribute() pozwala zmienić atrybuty HTML, np. źródło obrazu.

<img id="foto" src="kot.jpg" width="200">

<button onclick="zmienZdjecie()">Zmień zdjęcie</button>

<script>

function zmienZdjecie(){

  let obraz = document.getElementById("foto");

  obraz.setAttribute("src","pies.jpg");

}

</script>

3. Microdata i dostępność (WAI-ARIA)

📌 Microdata w HTML pozwala dodać dodatkowe znaczenie elementom strony, które mogą zrozumieć wyszukiwarki (np. Google). Dzięki temu treści takie jak imię osoby, tytuł artykułu czy cena produktu stają się **czytelne dla maszyn**, a nie tylko dla ludzi. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) zwiększa dostępność strony dla osób korzystających z czytników ekranowych.

• itemscope, itemtype, itemprop – oznaczanie elementów Microdata.
• Role i atrybuty WAI-ARIA: role, aria-label, aria-hidden.
• Poprawa czytelności treści i SEO dzięki semantyce i dostępności.

---

Przykład 1 – Microdata dla osoby

W tym przykładzie opisujemy osobę: jej imię, stanowisko i email. Wyszukiwarki mogą wykorzystać te informacje, aby lepiej wyświetlić stronę w wynikach wyszukiwania.

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Anna Nowak</span>
  <span itemprop="jobTitle">Nauczycielka</span>
  <span itemprop="email">anna.nowak@example.com</span>
</div>

Po dodaniu Microdata wyszukiwarki rozumieją, że jest to **informacja o osobie**, a nie zwykły tekst. Dzięki temu można poprawić widoczność strony w Google (SEO).

---

Przykład 2 – WAI-ARIA dla przycisku i menu

Tutaj pokazujemy jak poprawić dostępność strony dla osób korzystających z czytników ekranowych. Role i atrybuty ARIA pomagają określić, jakie funkcje mają elementy strony.

<button aria-label="Zamknij okno modalne">X</button>

<div role="navigation">
  <a href="#home">Strona główna</a>
  <a href="#kontakt">Kontakt</a>
</div>

<div aria-hidden="true">
  Ukryta treść dla czytników ekranu
</div>

- aria-label – podaje opis przycisku dla czytników ekranowych. - role="navigation" – oznacza menu nawigacyjne. - aria-hidden="true" – ukrywa element dla czytników ekranowych. Dzięki tym atrybutom osoby niewidome łatwiej korzystają ze strony.

---

Przykład 3 – Łączenie Microdata i WAI-ARIA

Możemy jednocześnie dodać **informacje dla wyszukiwarek i dla czytników ekranowych**. W tym przykładzie opisujemy produkt:

<div itemscope itemtype="http://schema.org/Product" role="region" aria-label="Informacje o produkcie">
  <h2 itemprop="name">Smartfon XYZ</h2>
  <p itemprop="description">Nowoczesny telefon z ekranem OLED.</p>
  <span itemprop="price">1999 PLN</span>
</div>

- Microdata (itemscope, itemtype, itemprop) – opisuje **produkt** dla wyszukiwarek. - WAI-ARIA (role="region", aria-label) – ułatwia orientację w sekcji osobom korzystającym z czytników ekranowych. Dzięki temu strona jest **bardziej dostępna i przyjazna SEO**.

---

4. Implementacja DOM w aplikacjach webowych

💻 Praktyczne zastosowanie obejmuje dynamiczną zmianę treści, dodawanie/usuwanie elementów oraz integrację Microdata i WAI-ARIA w interaktywnych komponentach.

Przykład praktyczny: manipulacja DOM i Microdata

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM i Microdata</title>
  <style>
    body { font-family:'Inter',sans-serif; background:#f8fafc; color:#1e293b; padding:20px; }
    header { background:#0ea5a3; color:white; padding:20px; text-align:center; border-radius:10px 10px 0 0; }
    main { background:white; padding:20px; margin-top:10px; border-radius:0 0 10px 10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
    section { margin-bottom:20px; }
    button { background:#0ea5a3; color:white; border:none; padding:10px 20px; border-radius:6px; cursor:pointer; }
    button:hover { background:#08999b; }
  </style>
</head>
<body>

  <header>
    <h1>Manipulacja DOM i Microdata</h1>
  </header>

  <main>
    <section id="articles" itemscope itemtype="http://schema.org/Article">
      <h2 itemprop="headline">Artykuł 1</h2>
      <p itemprop="articleBody">To jest przykładowy artykuł.</p>
    </section>

    <button onclick="addArticle()">Dodaj nowy artykuł</button>
  </main>

  <script>
    function addArticle() {
      const main = document.querySelector('main');
      const section = document.createElement('section');
      section.setAttribute('itemscope', '');
      section.setAttribute('itemtype', 'http://schema.org/Article');
      section.innerHTML = '<h2 itemprop="headline">Nowy artykuł</h2><p itemprop="articleBody">Treść dodana dynamicznie.</p>';
      main.appendChild(section);
      alert('Dodano nowy artykuł z Microdata!');
    }
  </script>

</body>
</html>
  

Po ukończeniu modułu uczestnicy będą umieli manipulować DOM w HTML5, tworzyć dynamiczne treści oraz implementować podstawowe Microdata i WAI-ARIA.