DOM (Document Object Model) to drzewiasta reprezentacja dokumentu HTML, którą przeglądarka buduje w pamięci po wczytaniu strony. Każdy znacznik, atrybut i kawałek tekstu staje się obiektem — węzłem (node) — a całość układa się w hierarchię z jednym korzeniem (document) i gałęziami schodzącymi do najgłębiej zagnieżdżonych elementów. Krótko: HTML to przepis na papierze, a DOM to żywy model tego przepisu, który możesz odczytywać i przebudowywać kodem.
Kluczowe jest to, że DOM nie jest tym samym co plik HTML. HTML to statyczny tekst, który serwer wysłał do przeglądarki. DOM to obiektowa struktura zbudowana na jego podstawie — i od momentu jej powstania żyje własnym życiem. Przeglądarka udostępnia ją JavaScriptowi przez globalny obiekt document, dzięki czemu możesz dodawać elementy, zmieniać tekst, podpinać zdarzenia (kliknięcia, wpisywanie) czy usuwać całe fragmenty strony bez przeładowania. To właśnie DOM jest tym mostem, który łączy statyczny dokument z dynamicznym kodem.
Jak to wygląda w praktyce
Otwórz dowolną stronę i wciśnij F12 — zakładka Elements w DevTools pokazuje aktualny stan DOM, a nie surowy HTML (to częste zaskoczenie). Z poziomu konsoli możesz nim sterować od ręki. Pobranie elementu po selektorze i podmiana treści to klasyk:
const el = document.querySelector('.tytul');— znajdź pierwszy pasujący węzeł,el.textContent = 'Nowy tytuł';— zmień jego tekst,el.remove();— wywal go z drzewa.
Na tym mechanizmie stoją całe frameworki. React czy Vue nie każą Ci grzebać w DOM ręcznie — operują na tzw. virtual DOM, czyli lekkiej kopii w pamięci, porównują ją ze stanem realnego drzewa i nanoszą tylko różnice. Robią to, bo bezpośrednie modyfikowanie DOM jest kosztowne.
Na co uważać
Najczęstszy błąd juniora: skrypt szuka elementu, którego jeszcze nie ma. Jeśli