DOM HTML: Co to jest i jak JavaScript ożywia Twoją stronę?

Węzły (nodes) bez tajemnic: co buduje Twoją stronę w oczach przeglądarki?

W tym drzewie, o którym wspomniałem, każdy element to tak naprawdę "węzeł" (ang. node). W DOM wyróżniamy kilka typów węzłów, które wspólnie budują całą strukturę strony:

• Węzły elementów (element nodes): To najczęściej spotykane węzły. Reprezentują one tagi HTML, takie jak ,
  ,
  , itd. Każdy z nich może mieć swoje własne dzieci i atrybuty.
• Węzły tekstowe (text nodes): Zawierają one czysty tekst, który znajduje się wewnątrz elementów HTML. Na przykład, tekst "Witaj świecie!" wewnątrz

  Witaj świecie!

  jest osobnym węzłem tekstowym.
• Węzły atrybutów (attribute nodes): Reprezentują atrybuty elementów HTML, takie jak href="link.html" w tagu czy id="moj-div" w tagu
  . Chociaż są częścią elementów, DOM traktuje je jako oddzielne węzły, co daje nam precyzyjną kontrolę.

  Przykładowy kod HTML i jego dokładne odzwierciedlenie w strukturze DOM

  Aby lepiej to zrozumieć, spójrzmy na prosty fragment kodu HTML:

   
  Witaj Świecie!
  

  Jak przeglądarka przetłumaczy to na strukturę DOM? Oto jak by to wyglądało:

  • document (korzeń całego dokumentu)
    • (główny element HTML)
      • (zazwyczaj zawiera metadane)
      • (widoczna część strony)
        • (element div z atrybutem id="container")

          • (element paragrafu)
            • Węzeł tekstowy: "Witaj "
            • (element strong)
              • Węzeł tekstowy: "Świecie"
            • Węzeł tekstowy: "!"

          Widzisz, jak każdy tag, a nawet tekst, staje się osobnym, zarządzalnym obiektem? To pozwala JavaScriptowi na precyzyjne dotarcie do każdego fragmentu strony.

          DOM a HTML: Kluczowe różnice, które musisz znać

          Często początkujący programiści mylą kod HTML z DOM. Chociaż są ze sobą ściśle powiązane, to jednak reprezentują dwie różne rzeczy. Zrozumienie tej różnicy jest kluczowe, aby efektywnie pracować z dynamicznymi stronami.

          Statyczny plan vs. dynamiczna konstrukcja: zrozumieć podstawową rozbieżność

          Kod HTML, który piszesz w edytorze, to statyczny tekst. To nic innego jak zestaw instrukcji, plan budowy Twojej strony. Jest niezmienny, dopóki sam go nie edytujesz i nie zapiszesz pliku. Natomiast DOM to dynamiczna, żywa konstrukcja, która istnieje w pamięci przeglądarki. To jak gotowy budynek, który można modyfikować w czasie rzeczywistym dodawać nowe okna, zmieniać kolor ścian, a nawet wyburzać całe piętra, bez konieczności budowania wszystkiego od nowa. Ta dynamiczność jest esencją interaktywnych stron.

          Jak przeglądarki naprawiają błędy w HTML podczas budowy DOM?

          Co ciekawe, przeglądarki są bardzo wyrozumiałe. Jeśli Twój kod HTML zawiera drobne błędy, na przykład zapomniałeś zamknąć jakiś tag

          , przeglądarka spróbuje go "naprawić" podczas tworzenia DOM. Oznacza to, że struktura DOM, którą widzi JavaScript, może nieco różnić się od Twojego pierwotnego, błędnego kodu HTML. To jest ważne, ponieważ czasem możesz być zaskoczony, dlaczego Twój JavaScript nie działa tak, jak oczekujesz być może przeglądarka zinterpretowała HTML inaczej, niż zamierzałeś.

          Co widzi JavaScript? Dlaczego skrypty "rozmawiają" z DOM, a nie z HTML?

          To jest kluczowa kwestia: JavaScript nie ma bezpośredniego dostępu do surowego tekstu HTML. Kiedy piszesz skrypt, który ma zmienić tekst przycisku lub dodać nowy element do strony, nie manipulujesz plikiem HTML. Zamiast tego, Twój JavaScript "rozmawia" z obiektem DOM, który jest reprezentacją tej strony w pamięci przeglądarki. Wszystkie operacje pobieranie elementów, zmiana ich zawartości, modyfikowanie stylów odbywają się poprzez API DOM. To właśnie DOM jest mostem między Twoim kodem JavaScript a wizualną reprezentacją strony.

          Do czego w praktyce służy DOM? Jak JavaScript zmienia stronę

          Skoro już wiemy, czym jest DOM i jak powstaje, przejdźmy do sedna do czego tak naprawdę służy w praktyce? To właśnie dzięki DOM Twoje strony mogą ożyć i stać się czymś więcej niż tylko statycznymi dokumentami. Pozwala nam na tworzenie dynamicznych interfejsów, które reagują na użytkownika w czasie rzeczywistym.

          Jak JavaScript staje się "reżyserem" Twojej strony internetowej?

          Wyobraź sobie, że JavaScript jest reżyserem, a DOM to scenariusz i cała scenografia Twojej strony. Reżyser (JavaScript) może wydawać polecenia: "Zmień tekst tego elementu!", "Dodaj nowy obrazek!", "Ukryj ten blok, gdy użytkownik kliknie przycisk!". Wszystkie te polecenia są wykonywane na obiekcie DOM, a przeglądarka natychmiast odzwierciedla te zmiany wizualnie. Dzięki temu możemy tworzyć interaktywne formularze, galerie zdjęć, animacje, a nawet całe aplikacje webowe, które działają bez przeładowywania strony.

          Zmienianie treści na żywo: `innerHTML` i `textContent` w akcji

          Jedną z najczęstszych operacji jest zmiana zawartości tekstowej lub HTML elementu. DOM oferuje do tego dwie główne właściwości:

          • innerHTML: Pozwala na pobieranie lub ustawianie całej zawartości HTML wewnątrz elementu.

            const mojDiv = document.getElementById('mojDiv');
            mojDiv.innerHTML = '
            Nowy tytuł
            Nowa treść.
            ';

          • textContent: Pozwala na pobieranie lub ustawianie wyłącznie zawartości tekstowej elementu, ignorując wszelkie tagi HTML. Jest bezpieczniejszy, jeśli chcesz wstawić tylko tekst.

            const mojParagraf = document.getElementById('mojParagraf');
            mojParagraf.textContent = 'To jest tylko tekst, bez HTML.';

          Dodawanie i usuwanie elementów: budowanie interfejsu bez przeładowania strony

          DOM umożliwia także dynamiczne tworzenie nowych elementów i dodawanie ich do strony, a także usuwanie istniejących. To podstawa budowania interfejsów użytkownika "w locie", na przykład dodawania nowych pozycji do listy zakupów czy wyświetlania dynamicznych powiadomień.

          • Tworzenie elementu:

            const nowyParagraf = document.createElement('p');
            nowyParagraf.textContent = 'To jest nowy paragraf dodany przez JS!';

          • Dodawanie elementu:

            const body = document.querySelector('body');
            body.appendChild(nowyParagraf); // Dodaje nowy paragraf na końcu body

          • Usuwanie elementu:

            const elementDoUsuniecia = document.getElementById('staryElement');
            elementDoUsuniecia.remove(); // Usuwa element ze strony

          Magia stylów: Jak dynamicznie modyfikować wygląd elementów za pomocą JS i DOM?

          Chcesz zmienić kolor tła, rozmiar czcionki czy widoczność elementu w zależności od interakcji użytkownika? DOM pozwala JavaScriptowi na bezpośrednią manipulację stylami CSS elementów. Każdy element w DOM ma właściwość style, która zawiera wszystkie style CSS.

          const mojPrzycisk = document.getElementById('mojPrzycisk');
          mojPrzycisk.style.backgroundColor = 'blue';
          mojPrzycisk.style.color = 'white';
          mojPrzycisk.style.fontSize = '20px';

          Możesz także dodawać i usuwać klasy CSS, co jest często lepszym rozwiązaniem dla bardziej złożonych zmian stylów:

          mojPrzycisk.classList.add('aktywny');
          mojPrzycisk.classList.remove('ukryty');

          Podstawowe narzędzia do pracy z DOM

          Aby móc manipulować DOM, musisz najpierw "złapać" konkretne elementy na stronie. Istnieje kilka podstawowych metod, które każdy programista JavaScript powinien znać.

          Jak precyzyjnie "złapać" element na stronie? Metody `getElementById` i `querySelector`

          To są Twoje główne narzędzia do znajdowania elementów w drzewie DOM:

          • document.getElementById('idElementu'): Jest to najszybsza i najbardziej bezpośrednia metoda, jeśli wiesz, że element ma unikalny atrybut id. Zwraca pojedynczy element.

            const naglowek = document.getElementById('tytulStrony');

          • document.querySelector('selektorCSS'): Ta metoda jest niezwykle potężna, ponieważ pozwala na wybieranie elementów za pomocą dowolnego selektora CSS (takiego jak te, których używasz w plikach .css). Zwraca pierwszy pasujący element.

            const pierwszyParagraf = document.querySelector('p');
            const elementZKlasa = document.querySelector('.mojaKlasa');
            const przyciskWDivie = document.querySelector('div > button');

          • document.querySelectorAll('selektorCSS'): Jeśli potrzebujesz wszystkich elementów pasujących do danego selektora, ta metoda zwróci listę (NodeList) wszystkich znalezionych elementów.

            const wszystkieParagrafy = document.querySelectorAll('p');

          Tworzenie nowych elementów od zera: `createElement` i `appendChild`

          Jak już wspomniałem, tworzenie nowych elementów i dodawanie ich do strony to chleb powszedni dynamicznych aplikacji:

          • document.createElement('nazwaTaga'): Tworzy nowy element HTML w pamięci. Nie jest on jeszcze widoczny na stronie.

            const nowyObrazek = document.createElement('img');

          • parentElement.appendChild(nowyElement): Dodaje stworzony element jako ostatnie dziecko do wybranego elementu rodzica.

            const kontener = document.getElementById('galeria');
            nowyObrazek.src = 'moj-obrazek.jpg';
            kontener.appendChild(nowyObrazek);

          Jak reagować na działania użytkownika? Wprowadzenie do zdarzeń (events) w DOM

          Interaktywność to klucz. DOM pozwala nam "nasłuchiwać" na różne zdarzenia, które dzieją się na stronie kliknięcia myszką, najechanie kursorem, naciśnięcie klawisza, wysłanie formularza i wiele innych. Robimy to za pomocą tzw. "nasłuchiwaczy zdarzeń" (event listeners):

          const przycisk = document.getElementById('przyciskAkcji');
          przycisk.addEventListener('click', function() { alert('Przycisk został kliknięty!');
          });

          To właśnie dzięki zdarzeniom Twoja strona może reagować na użytkownika, co jest podstawą każdego dynamicznego doświadczenia.

          Co to jest Virtual DOM i dlaczego jest tak ważny?

          W miarę jak strony internetowe stawały się coraz bardziej złożone, bezpośrednie i częste manipulowanie "prawdziwym" DOM zaczęło być problemem wydajnościowym. Manipulacja DOM jest kosztowna, ponieważ każda zmiana wymaga od przeglądarki przeliczenia układu (layout) i ponownego renderowania (repaint) części lub całości strony. To właśnie tutaj wkracza koncepcja Virtual DOM.

          Czym jest wirtualny DOM i dlaczego frameworki takie jak React go uwielbiają?

          Virtual DOM to nic innego jak lekka, wirtualna kopia rzeczywistego DOM, przechowywana w pamięci. Nie jest to prawdziwy DOM przeglądarki, ale jego abstrakcyjna reprezentacja, którą frameworki JavaScript (takie jak React, Vue.js czy Svelte) tworzą i zarządzają. Kiedy Twoja aplikacja React chce zmienić coś na stronie, nie manipuluje bezpośrednio prawdziwym DOM. Zamiast tego, modyfikuje tę wirtualną kopię. To sprawia, że operacje są znacznie szybsze, ponieważ nie wywołują kosztownych operacji renderowania przeglądarki.

          Szybkość i wydajność: Jak Virtual DOM rewolucjonizuje aktualizację stron?

          Kluczowa zaleta Virtual DOM leży w jego efektywności. Kiedy w aplikacji React (lub innej, która używa Virtual DOM) zachodzi zmiana stanu, framework tworzy nową, zaktualizowaną wersję Virtual DOM. Następnie, specjalny algorytm (zwany "diffing") porównuje tę nową wersję Virtual DOM z poprzednią. Zamiast aktualizować cały prawdziwy DOM, identyfikuje on tylko minimalne różnice między obiema wersjami. Po znalezieniu tych różnic, framework "patchuje" (łatkuje) prawdziwy DOM, aktualizując tylko te jego części, które faktycznie się zmieniły. Dzięki temu przeglądarka musi przeliczyć i przerysować tylko niewielkie fragmenty strony, co drastycznie poprawia wydajność i płynność działania aplikacji, zwłaszcza tych o złożonych interfejsach.

          Przeczytaj również: Wyśrodkuj tekst w HTML: Szybko i poprawnie z CSS, Flexbox, Grid

          Rzeczywisty DOM vs Wirtualny DOM: kluczowe porównanie dla ambitnych

          Podsumowując, różnice są znaczące:

          • Rzeczywisty DOM: Jest to oficjalny interfejs API przeglądarki do manipulacji dokumentem. Każda zmiana jest kosztowna, ponieważ wywołuje bezpośrednie operacje renderowania.
          • Virtual DOM: Jest to abstrakcyjna, lekka kopia rzeczywistego DOM, zarządzana przez frameworki JavaScript. Zmiany są najpierw nanoszone na Virtual DOM, a następnie inteligentnie synchronizowane z prawdziwym DOM, co minimalizuje kosztowne operacje renderowania i znacząco zwiększa wydajność.

          Dla początkujących ważne jest, aby zrozumieć, że choć Virtual DOM jest zaawansowaną koncepcją, to jego istnienie opiera się na fundamencie, jakim jest rzeczywisty DOM. Bez zrozumienia tego drugiego, trudno docenić geniusz i korzyści płynące z tego pierwszego.