DOM i jego znaczenie

Wprowadzenie

DOM (Document Object Model) to interfejs programistyczny reprezentujacy strukture dokumentu HTML jako drzewo obiektow. Dzieki DOM, JavaScript może dynamicznie modyfikować zawartosc, strukture i style strony internetowej.

Każdy element HTML staje się obiektem (węzłem), który można odczytywać, modyfikować lub usuwać za pomoca JavaScript. DOM stanowi most miedzy statycznym kodem HTML a dynamicznymi interakcjami na stronie.

Kluczowe pojecia

Czym jest DOM?

Nie jest czescia JavaScript - to API przegladarki
Nie jest tym samym co HTML - HTML to tekst, DOM to obiektowa reprezentacja
Jest dynamiczny - zmiany w DOM natychmiast widac na stronie

Typy węzłów (Node Types)

Element - tag HTML (div, p, span)
Text - tekst wewnatrz elementu
Attribute - atrybut elementu (class, id)
Document - korzen drzewa DOM
Comment - komentarz HTML

Struktura drzewa DOM

                    document
                        │
                      <html>
                    /        \
               <head>        <body>
                 │          /      \
              <title>    <div>     <footer>
                          │
                         <p>
                        /    \
                    "Tekst"  <span>

Przykładowy HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Strona</title>
  </head>
  <body>
    <div id="container">
      <p class="text">Tekst <span>ważny</span></p>
    </div>
    <footer>Stopka</footer>
  </body>
</html>

Metody selekcji elementow

Selekcja pojedynczego elementu

// Po ID - zwraca jeden element lub null
const container = document.getElementById('container');

// Po selektorze CSS - zwraca pierwszy pasujacy
const paragraph = document.querySelector('.text');
const header = document.querySelector('h1');

Selekcja wielu elementow

// Wszystkie elementy z klasa - zwraca HTMLCollection (live)
const items = document.getElementsByClassName('item');

// Wszystkie elementy po tagu - zwraca HTMLCollection
const divs = document.getElementsByTagName('div');

// Po selektorze CSS - zwraca NodeList (static)
const buttons = document.querySelectorAll('button.primary');

Manipulacja trescia

Odczyt i zmiana tekstu

const element = document.querySelector('#info');

// Pobierz tekst (bez tagow HTML)
console.log(element.textContent);

// Zmien tekst
element.textContent = 'Nowy tekst';

// innerHTML - interpretuje tagi HTML (uwaga na XSS!)
element.innerHTML = '<strong>Pogrubiony</strong> tekst';

Atrybuty elementow

const link = document.querySelector('a');

// Odczyt atrybutu
console.log(link.getAttribute('href'));
console.log(link.href); // bezposredni dostep

// Ustawienie atrybutu
link.setAttribute('target', '_blank');
link.href = 'https://example.com';

// Usuniecie atrybutu
link.removeAttribute('target');

// Sprawdzenie istnienia
if (link.hasAttribute('disabled')) {
  console.log('Link wyłączony');
}

Klasy CSS

const box = document.querySelector('.box');

// Dodaj klase
box.classList.add('active');

// Usun klase
box.classList.remove('hidden');

// Przełącz (toggle) - dodaj jeśli nie ma, usun jeśli jest
box.classList.toggle('selected');

// Sprawdz czy zawiera
if (box.classList.contains('active')) {
  console.log('Box jest aktywny');
}

Tworzenie i usuwanie elementow

Tworzenie nowych elementow

// Utworz nowy element
const newDiv = document.createElement('div');
newDiv.textContent = 'Nowy element';
newDiv.classList.add('card');

// Dodaj do dokumentu
document.body.appendChild(newDiv);

// Wstaw przed innym elementem
const container = document.querySelector('#container');
const reference = document.querySelector('#reference');
container.insertBefore(newDiv, reference);

Usuwanie elementow

const element = document.querySelector('.to-remove');

// Nowoczesna metoda
element.remove();

// Starsza metoda (przez rodzica)
element.parentNode.removeChild(element);

Obsługa zdarzen (Events)

Dodawanie listenera

const button = document.querySelector('button');

button.addEventListener('click', function(event) {
  console.log('Kliknieto przycisk!');
  console.log('Target:', event.target);
});

// Funkcja strzałkowa
button.addEventListener('click', (e) => {
  e.preventDefault(); // Zapobiegaj domyslnej akcji
});

Popularne zdarzenia

Zdarzenie	Kiedy wystepuje
click	Klikniecie elementu
submit	Wysłanie formularza
input	Zmiana wartości input
keydown	Nacisniecie klawisza
mouseover	Najechanie myszka
load	Załadowanie strony

Event Delegation (delegacja zdarzen)

// Zamiast dodawać listener do każdego buttona
// Dodajemy jeden do rodzica

document.querySelector('#lista').addEventListener('click', (e) => {
  if (e.target.matches('button.delete')) {
    e.target.closest('li').remove();
  }
});

Reflow i Repaint

Definicje

Reflow - ponowne obliczenie layoutu (pozycje, rozmiary)
Repaint - ponowne rysowanie elementow (kolory, cienie)

Optymalizacja

// Źle - wiele reflow
for (let i = 0; i < 100; i++) {
  document.body.innerHTML += '<div>Item</div>';
}

// Dobrze - jeden reflow
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item';
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

Najczestsze błędy

// Zawsze sprawdzaj czy element istnieje
const element = document.getElementById('może-nie-istniec');
if (element) {
  element.textContent = 'OK';
}

Podsumowanie

DOM to obiektowa reprezentacja dokumentu HTML
Przegladarka tworzy DOM z kodu HTML
JavaScript manipuluje DOM przez API przegladarki
Selekcja elementow: getElementById, querySelector, querySelectorAll
Manipulacja: textContent, innerHTML, classList, setAttribute
Zdarzenia obsługujemy przez addEventListener
Optymalizuj operacje DOM aby unikac wielu reflow

Zasoby

MDN: DOM Dokumentacja DOM API

JavaScript.info: DOM Interaktywny kurs DOM

DOM Enlightenment Książka o DOM (darmowa online)