Moduł 06 – DOM

Mateusz Choma -


Moduł kursu programowania o numerze 6 nosi nazwę "DOM". Jest to moduł, który koncentruje się na zrozumieniu i wykorzystaniu Document Object Model (DOM) - obiektowego drzewa dokumentu, przechowywanego w pamięci przeglądarki. Przy użyciu zestawu funkcji udostępnianych przez JavaScript, programiści są w stanie modyfikować to drzewo dokumentu, co umożliwia interakcję z elementami strony internetowej.

W ramach tego modułu uczestnicy kursu dowiedzą się, czym jest renderowanie i jakie są różnice między programowaniem imperatywnym a deklaratywnym. Poznają także, które z tych podejść preferowane są przez programistów.

Warto zaznaczyć, że istnieje powszechne przekonanie, że JavaScript nie może zmieniać elementów stworzonych w HTML-u. Niemniej jednak, JavaScript może przekazać przeglądarce instrukcje dotyczące dokonywania tych zmian, co pozwala na dynamiczną modyfikację elementów na stronie za pomocą JavaScript.

📚 Zawartość modułu

Moduł "DOM" jest podzielony na 25 lekcji:

  1. Wstęp: Wprowadzenie do modułu kursu "DOM" oraz omówienie jego celu i zakresu.
  2. Co to jest DOM: Wyjaśnienie, czym dokładnie jest Document Object Model (DOM) i jak jest związany z przeglądarką internetową.
  3. Składniki interfejsu: Zapoznanie się z różnymi składnikami interfejsu dostępnymi w DOM, takimi jak elementy HTML, style CSS, atrybuty i wiele innych. Wyjaśnienie, jak programiści mogą manipulować tymi składnikami za pomocą JavaScript.
  4. Window i document: Poznanie obiektów window i document i zrozumienie ich roli w interakcji z przeglądarką. Omówienie różnych właściwości i metod dostępnych w tych obiektach.
  5. Wybieranie elementów — stare metody: Przedstawienie tradycyjnych metod wybierania elementów w DOM, takich jak getElementById, getElementsByClassName, getElementsByTagName, oraz wyjaśnienie, jak ich używać w praktyce.
  6. Wybieranie elementów - querySelector: Omówienie bardziej nowoczesnej metody wybierania elementów w DOM za pomocą querySelector i querySelectorAll. Wyjaśnienie składni i możliwości tych metod.
  7. innerHTML i innerText: Poznanie właściwości innerHTML i innerText, które umożliwiają programistom manipulację zawartością elementów HTML. Wyjaśnienie różnicy między nimi oraz omówienie ich zastosowań.
  8. Zmienianie atrybutów elementów: Przedstawienie różnych metod i technik dostępnych w celu modyfikacji atrybutów.
  9. Tworzenie elementów i dodawanie ich do body: Omówienie procesu tworzenia nowych elementów w DOM przy użyciu metody createElement oraz dodawanie ich do drzewa dokumentu za pomocą metody appendChild.
  10. Tworzenie i usuwanie elementów: Zapoznanie się z technikami tworzenia i usuwania elementów w DOM.
  11. Stylowanie elementów CSS w JS: Poznanie możliwości zmiany stylów CSS elementów w DOM za pomocą JavaScript.
  12. Pozycja i wymiary elementu: Uzyskiwanie informacji na temat pozycji i wymiarów elementu w DOM. Omówienie metod, które umożliwiają programistom pobieranie tych informacji i ich wykorzystanie.
  13. Projekt 0: Praktyczne zastosowanie poznanych dotychczas zagadnień w celu stworzenia prostego projektu wykorzystującego manipulację elementami w DOM.
  14. Eventy addEventListener i click: Zapoznanie się z obsługą zdarzeń w DOM za pomocą metody addEventListener skupiając się na obsłudze zdarzenia click.
  15. Event reference: Przedstawienie różnych typów zdarzeń dostępnych w DOM i omówienie ich obsługi. Zapoznanie się z dostępnymi informacjami w obiekcie zdarzenia (event object).
  16. Event input: Omówienie zdarzenia input, które jest wywoływane podczas wprowadzania danych przez użytkownika. Przedstawienie praktycznych zastosowań tego zdarzenia.
  17. Event change: Zapoznanie się z zdarzeniem change, które występuje, gdy wartość elementu zmienia się.
  18. Event change w radio button: Skupienie się na specyficznej sytuacji zmiany w radio button i omówienie technik obsługi tego zdarzenia w kontekście tych elementów formularza.
  19. Eventy klawiatury: Obsługa zdarzeń związanych z klawiaturą w DOM. Przedstawienie różnych typów zdarzeń klawiatury i ich praktycznych zastosowań.
  20. Projekt 1: Implementacja projektu wykorzystującego obsługę zdarzeń klawiatury oraz manipulację elementami w DOM.
  21. Event bubbling: Wyjaśnienie zjawiska bubblingu (bąbelkowania) zdarzeń w DOM i omówienie, jak można kontrolować to zachowanie. Przedstawienie praktycznych zastosowań bubblingu.
  22. Event form submit: Omówienie zdarzenia submit, które występuje podczas przesyłania formularza.
  23. Event scroll: Nauka, jak obsługiwać zdarzenie scroll, które jest wywoływane, gdy użytkownik przewija stronę.
  24. LocalStorage i sessionStorage: Wprowadzenie do mechanizmów przechowywania danych lokalnie w przeglądarce za pomocą LocalStorage i sessionStorage. Omówienie metod dostępu i zarządzania tymi danymi.
  25. Projekt 2: Implementacja bardziej zaawansowanego projektu, wykorzystującego różne techniki manipulacji elementami w DOM oraz obsługę zdarzeń.

👀 Zobacz przykładową lekcję z tego modułu kursu:

👨‍💻 Zobacz przykładowy kod z tej lekcji:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!