DOM (Document Object Model) to programistyczny interfejs dokumentów HTML i XML: drzewiasta reprezentacja strony, w której każdy element jest obiektem dostępnym z JavaScriptu. To fundament platformy webowej — standard W3C/WHATWG. Możliwości: wyszukiwanie elementów (querySelector, getElementById), modyfikacja treści, atrybutów i stylów, obsługa zdarzeń i nawigacja po drzewie. Nowoczesne frameworki — React, Vue, Angular — abstrahują bezpośrednią manipulację (wirtualny DOM, reaktywność), ale solidne zrozumienie DOM pozostaje fundamentem zawodu: bez niego frameworki są magią, z nim — narzędziami.

Czysty DOM czy frameworki?

Czysty DOM (document.querySelector, addEventListener) to warstwa fundamentalna: zero abstrakcji, pełna kontrola, minimalny narzut — właściwy dla małych projektów, bibliotek i ścieżek krytycznych wydajnościowo. Frameworki dokładają abstrakcję: React z wirtualnym DOM i deklaratywnym JSX, Vue z reaktywnymi wiązaniami — w zamian za produktywność przy złożonych aplikacjach. Osobna kategoria to jQuery: wygodna nakładka z lat 2006–2015, dziś zbędna, bo natywne API dogoniło jej wygodę. Zdrowa ścieżka rozwoju: najpierw solidne fundamenty czystego DOM (bez nich debugowanie frameworka to wróżenie), potem React jako narzędzie codzienne — w tej kolejności, nie odwrotnie.

Jakie operacje wykonuje się na DOM?

Warsztat podstawowy: wyszukiwanie — querySelector, querySelectorAll, getElementById, treść — textContent, innerHTML, appendChild, removeChild, atrybuty — setAttribute, getAttribute i wygodne API classList, style — element.style oraz przełączanie klas przez classList.toggle, zdarzenia — addEventListener, removeEventListener, delegacja zdarzeń, nawigacja po drzewie — parentNode, children, nextSibling, nowoczesne obserwatory — IntersectionObserver (leniwe ładowanie), MutationObserver (zmiany w drzewie), ResizeObserver. Obserwatory to najczęściej pomijana część warsztatu — a zastępują całe klasy kruchych rozwiązań na listenerach scrolla.

Jak optymalizować pracę z DOM?

Zasady wydajności: grupowanie zmian — wiele modyfikacji naraz zamiast serii pojedynczych reflow, DocumentFragment — budowa struktury poza drzewem i jedno doklejenie, delegacja zdarzeń — jeden listener na rodzicu zamiast setek na dzieciach, unikanie layout thrashing — odczyty właściwości geometrycznych (offsetWidth) grupowane, nie przeplatane z zapisami, IntersectionObserver zamiast nasłuchiwania scrolla, requestAnimationFrame — animacje zsynchronizowane z odświeżaniem ekranu, bezpieczeństwo przy okazji — textContent zamiast innerHTML dla danych użytkownika (ochrona przed XSS). Te same zasady tłumaczą, czemu frameworki robią to, co robią — wirtualny DOM to właśnie zautomatyzowane grupowanie zmian.

Jakie są dobre praktyki pracy z DOM?

Kanon współczesny: nowoczesne API — querySelector, classList, addEventListener; bez inline handlerów i reliktów, bezpieczeństwo — textContent dla danych użytkownika, DOMPurify przy koniecznym HTML-u; XSS to wciąż plaga, wydajność — grupowanie zmian, delegacja zdarzeń, obserwatory, podział ról — czysty DOM w małych projektach i bibliotekach, frameworki w aplikacjach zespołowych, dostępność — manipulacje DOM nie mogą psuć nawigacji klawiaturą i czytników ekranu. Rada rozwojowa: fundamenty DOM opanowane przed frameworkiem procentują całą karierę — na rozmowach technicznych pytania „jak to działa pod spodem" odsiewają kandydatów skuteczniej niż pytania o hooki.

Kontakt

Front-end

DOM: jak skutecznie manipulować modelem obiektowym dokumentu?

Zapraszam do artykułu poświęconego tajnikom skutecznej manipulacji DOM - Modelem Obiektowym Dokumentu. DOM jest nieodłączny w świecie web developmentu, a właściwe jego zrozumienie może dać programiście ogromne możliwości w tworzeniu interaktywnych i responsywnych stron internetowych. Zanurzmy się w podróż po strukturze, właściwościach i metodach DOM, aby jeszcze lepiej zrozumieć, jak działa nasz kod.

Tomasz Kozon

CEO

05 wrz 2023

Nauka manipulacji DOM rozpoczyna się od zrozumienia jego struktury. DOM (Model Obiektowy Dokumentu) to hierarchiczny model, pozwalający na reprezentację struktury dokumentów HTML oraz XML. Główne elementy stanowiące go to węzły, które mogą mieć różne typy - elementy (tagi HTML), atrybuty, tekst czy komentarze. Każdy element na stronie webowej jest reprezentowany w DOM poprzez węzeł, a zależności pomiędzy nimi tworzą drzewo DOM. Kluczem do skutecznej manipulacji jest umiejętność odnajdywania, dodawania, modyfikowania czy usuwania poszczególnych węzłów. Rozumienie struktury DOM pozwala na efektywne tworzenie interaktywnych i dynamicznych stron internetowych z użyciem JavaScript.

Powiązane case studies

Laptop z serwisem BlueApart — platforma rezerwacji apartamentów nad morzem

Dwucyfrowy wzrost widoczności organicznej i automatyzacja obsługi gości dla operatora apartamentów

Klient: Blueapart

Branża: Booking i hotele / TravelTech

Wynajem magazynu w minuty zamiast dni - automatyzacja umów i płatności

Klient: Balticon S.A.

Branża: Logistyka / LogTech

Platforma edukacyjna generująca materiały do nauki programowania z ChatGPT

Klient: Klient (Aplikacja webowa do nauki programowania)

Branża: Edukacja / EdTech

Wprowadzenie do manipulacji DOM za pomocą JavaScript

Manipulacja Modelem Obiektowym Dokumentu, stanowi kluczowy aspekt programowania w JavaScript. Poprzez interakcje z DOM, deweloperzy mają możliwość uzyskania dostępu do każdego elementu strony internetowej, a następnie go edytować, usuwać czy dodawać. Mogą zmieniać style, atrybuty, a nawet reagować na zdarzenia. Dzięki temu mogą tworzyć skomplikowane i interaktywne interfejsy użytkownika, które podnoszą jakość doświadczenia użytkownika. Warte zauważenia jest to, że manipulację można przeprowadzić bez żadnych bibliotek czy frameworków, ale istnieją również narzędzia, które mogą usprawnić ten proces, takie jak jQuery, React czy Angular.

Powiązana usługa

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

Selekcja i modyfikacja elementów DOM

Selekcja i modyfikacja elementów to kluczowe aspekty, gdy chodzi o manipulację Modelem Obiektowym Dokumentu. Selekcja pozwala na lokalizację i odczytanie określonych elementów znajdujących się na stronie, natomiast modyfikacja umożliwia zmianę ich zawartości czy struktury. Wykorzystując JavaScript, możemy wybierać elementy na różne sposoby - poprzez id, klasę, tag czy nawet za pomocą selektorów CSS. Modyfikacja obejmuje zmianę tekstu, atrybutów, stylów czy dodawanie i usuwanie elementów. Poznanie tych technik jest absolutnie niezbędne dla każdego, kto pragnie skutecznie manipulować DOM.

Tworzenie, usuwanie i klonowanie węzłów DOM

Tworzenie, usuwanie oraz klonowanie węzłów to podstawowe operacje, które można wykonać na Drzewie DOM. Do ich realizacji skrypt JavaScript dostarcza odpowiednie metody. Dla tworzenia węzłów używamy metody 'createElement', która jako parametr przyjmuje nazwę nowego węzła. Usuwanie węzłów realizowane jest przez funkcję 'removeChild', gdzie w parametrze musimy podać węzeł do usunięcia. Kluczowym etapem jest tutaj znalezienie rodzica usuwanego węzła, bez tego operacja nie może zostać przeprowadzona. Klonowanie węzłów umożliwia metoda 'cloneNode'. Pozwala ona na skopiowanie istniejącego węzła. Ważnym jest, że domyślnie klonowany jest tylko sam węzeł, bez jego dzieci. Jeżeli chcemy skopiować węzeł wraz ze wszystkimi potomkami, musimy funkcji 'cloneNode' przekazać parametr 'true'. Omówione metody są podstawą skutecznej manipulacji Modelem Obiektowym Dokumentu.

osoba używająca komputera, DOM (Model Obiektowy Dokumentu)

Praktyczne przykłady skutecznej manipulacji DOM

Manipulacja DOM to kluczowy aspekt w tworzeniu interaktywnych stron internetowych. Praktyczne zastosowanie jest proste, jednak efektowne. Przykładowo, poprzez wykorzystanie metody 'getElementById' można łatwo zlokalizować i zmodyfikować element na stronie poprzez jego ID. Kolejnym przykładem może być użycie ‘querySelectorAll’, dzięki któremu można wybierać wiele elementów spełniających określony kryterium, na przykład wszystkie elementy listy. To pozwala na manipulowanie dużą ilością elementów jednocześnie. Możemy też, korzystając z metod .addClass i .removeClass zmieniać klasy CSS danych elementów, co prowadzi do dynamicznej zmiany stylu strony. Takie praktyczne zastosowania manipulacji DOM otwierają drzwi do tworzenia bardziej interaktywnych i responsywnych stron internetowych.

FAQ

FAQ – DOM manipulation

DOM (Document Object Model) to programistyczny interfejs dokumentów HTML i XML: drzewiasta reprezentacja strony, w której każdy element jest obiektem dostępnym z JavaScriptu. To fundament platformy webowej — standard W3C/WHATWG. Możliwości: wyszukiwanie elementów (querySelector, getElementById), modyfikacja treści, atrybutów i stylów, obsługa zdarzeń i nawigacja po drzewie. Nowoczesne frameworki — React, Vue, Angular — abstrahują bezpośrednią manipulację (wirtualny DOM, reaktywność), ale solidne zrozumienie DOM pozostaje fundamentem zawodu: bez niego frameworki są magią, z nim — narzędziami.
Czysty DOM (document.querySelector, addEventListener) to warstwa fundamentalna: zero abstrakcji, pełna kontrola, minimalny narzut — właściwy dla małych projektów, bibliotek i ścieżek krytycznych wydajnościowo. Frameworki dokładają abstrakcję: React z wirtualnym DOM i deklaratywnym JSX, Vue z reaktywnymi wiązaniami — w zamian za produktywność przy złożonych aplikacjach. Osobna kategoria to jQuery: wygodna nakładka z lat 2006–2015, dziś zbędna, bo natywne API dogoniło jej wygodę. Zdrowa ścieżka rozwoju: najpierw solidne fundamenty czystego DOM (bez nich debugowanie frameworka to wróżenie), potem React jako narzędzie codzienne — w tej kolejności, nie odwrotnie.
Warsztat podstawowy:
wyszukiwanie — querySelector, querySelectorAll, getElementById,
treść — textContent, innerHTML, appendChild, removeChild,
atrybuty — setAttribute, getAttribute i wygodne API classList,
style — element.style oraz przełączanie klas przez classList.toggle,
zdarzenia — addEventListener, removeEventListener, delegacja zdarzeń,
nawigacja po drzewie — parentNode, children, nextSibling,
nowoczesne obserwatory — IntersectionObserver (leniwe ładowanie), MutationObserver (zmiany w drzewie), ResizeObserver.
Obserwatory to najczęściej pomijana część warsztatu — a zastępują całe klasy kruchych rozwiązań na listenerach scrolla.
Zasady wydajności:
grupowanie zmian — wiele modyfikacji naraz zamiast serii pojedynczych reflow,
DocumentFragment — budowa struktury poza drzewem i jedno doklejenie,
delegacja zdarzeń — jeden listener na rodzicu zamiast setek na dzieciach,
unikanie layout thrashing — odczyty właściwości geometrycznych (offsetWidth) grupowane, nie przeplatane z zapisami,
IntersectionObserver zamiast nasłuchiwania scrolla,
requestAnimationFrame — animacje zsynchronizowane z odświeżaniem ekranu,
bezpieczeństwo przy okazji — textContent zamiast innerHTML dla danych użytkownika (ochrona przed XSS).
Te same zasady tłumaczą, czemu frameworki robią to, co robią — wirtualny DOM to właśnie zautomatyzowane grupowanie zmian.
Kanon współczesny:
nowoczesne API — querySelector, classList, addEventListener; bez inline handlerów i reliktów,
bezpieczeństwo — textContent dla danych użytkownika, DOMPurify przy koniecznym HTML-u; XSS to wciąż plaga,
wydajność — grupowanie zmian, delegacja zdarzeń, obserwatory,
podział ról — czysty DOM w małych projektach i bibliotekach, frameworki w aplikacjach zespołowych,
dostępność — manipulacje DOM nie mogą psuć nawigacji klawiaturą i czytników ekranu.
Rada rozwojowa: fundamenty DOM opanowane przed frameworkiem procentują całą karierę — na rozmowach technicznych pytania „jak to działa pod spodem" odsiewają kandydatów skuteczniej niż pytania o hooki.

Budowa ultraszybkiego sklepu internetowego to dziś nie tylko kwestia wygody użytkownika, ale kluczowy element przewagi konkurencyjnej w e-commerce. Każda dodatkowa sekunda ładowania potrafi obniżyć konwersję, dlatego nowoczesne technologie muszą stawiać wydajność na pierwszym miejscu. React Storefront powstał właśnie po to, by łączyć elastyczność Reacta z ekstremalną szybkością działania i sprawdzonymi wzorcami dla sklepów online.