DOM i jego znaczenie

This content is not available in your language yet.

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)