Praca z DOM w JavaScript

1. Wprowadzenie

DOM (Document Object Model) to interfejs programistyczny, który reprezentuje strukturę dokumentu HTML/XML jako drzewo obiektów.

Dzięki DOM JavaScript może: * odczytywać i modyfikować zawartość strony, * dodawać i usuwać elementy HTML, * zmieniać style i atrybuty, * reagować na zdarzenia użytkownika (kliknięcia, ruchy myszy, itp.).

DOM to most między stroną HTML a JavaScriptem.

2. Struktura DOM

DOM reprezentuje dokument jako drzewo węzłów (nodes).

Reprezentacja w DOM:

document
  └── html
      ├── head
      │   └── title
      │       └── "Moja strona"
      └── body
          ├── h1
          │   └── "Witaj"
          └── p
              └── "To jest paragraf."

3. Wybieranie elementów

3.1 `getElementById()`

Zwraca element o podanym id.

3.2 `getElementsByClassName()`

Zwraca kolekcję elementów o podanej klasie.

3.3 `getElementsByTagName()`

Zwraca kolekcję elementów o podanym tagu.

3.4 `querySelector()`

Zwraca pierwszy element pasujący do selektora CSS.

3.5 `querySelectorAll()`

Zwraca wszystkie elementy pasujące do selektora CSS.

Porównanie:

Metoda	Zwraca	Selektor
`getElementById()`	Pojedynczy element	ID
`getElementsByClassName()`	Kolekcja (live)	Klasa
`getElementsByTagName()`	Kolekcja (live)	Tag
`querySelector()`	Pierwszy element	CSS (dowolny)
`querySelectorAll()`	NodeList (static)	CSS (dowolny)

4. Modyfikowanie zawartości

4.1 `innerHTML`

Ustawia lub pobiera HTML wewnątrz elementu.

4.2 `textContent`

Ustawia lub pobiera tylko tekst (bez HTML).

4.3 `innerText`

Podobne do textContent, ale uwzględnia stylowanie (widoczność).

Różnica: * textContent – zwraca cały tekst, nawet ukryty * innerText – zwraca tylko widoczny tekst

5. Modyfikowanie atrybutów

5.1 `getAttribute()`

Pobiera wartość atrybutu.

5.2 `setAttribute()`

Ustawia wartość atrybutu.

5.3 Bezpośredni dostęp

Można też używać właściwości bezpośrednio:

6. Modyfikowanie stylów CSS

6.1 `style`

Bezpośrednia zmiana stylów inline.

Uwaga: Nazwy właściwości CSS w camelCase (np. backgroundColor, nie background-color).

6.2 `classList`

Zarządzanie klasami CSS.

Metoda	Opis
`add()`	Dodaje klasę
`remove()`	Usuwa klasę
`toggle()`	Przełącza klasę (dodaje/usuwa)
`contains()`	Sprawdza, czy klasa istnieje

7. Tworzenie i dodawanie elementów

7.1 `createElement()`

Tworzy nowy element.

7.2 `appendChild()`

Dodaje element jako ostatnie dziecko.

7.3 `insertBefore()`

Wstawia element przed wskazanym elementem.

7.4 `prepend()` i `append()`

Nowoczesne metody (ES6).

8. Usuwanie elementów

8.1 `removeChild()`

Usuwa dziecko z rodzica.

8.2 `remove()`

Usuwa element bezpośrednio (ES6).

9. Nawigacja po DOM

Właściwości do poruszania się po drzewie:

Właściwość	Opis
`parentNode`	Rodzic elementu
`childNodes`	Wszystkie dzieci (w tym tekstowe)
`children`	Tylko elementy HTML
`firstChild`	Pierwsze dziecko (może być tekst)
`firstElementChild`	Pierwszy element HTML
`lastChild`	Ostatnie dziecko
`lastElementChild`	Ostatni element HTML
`nextSibling`	Następny węzeł
`nextElementSibling`	Następny element
`previousSibling`	Poprzedni węzeł
`previousElementSibling`	Poprzedni element

10. Przykłady praktyczne

Zmiana tekstu wszystkich paragrafów:

Dodanie nowego elementu listy:

Przełączanie widoczności:

11. Dobre praktyki

Używaj querySelector() i querySelectorAll() – są bardziej elastyczne
Unikaj innerHTML przy danych użytkownika (ryzyko XSS)
Używaj classList zamiast bezpośredniej modyfikacji className
Cache referencji do elementów, zamiast wielokrotnie ich wyszukiwać
Minimalizuj manipulacje DOM – są kosztowne wydajnościowo

12. Podsumowanie

Operacja	Metoda/Właściwość
Wybieranie elementów	`querySelector()`, `getElementById()`
Modyfikowanie tekstu	`textContent`, `innerHTML`
Zmiana atrybutów	`setAttribute()`, bezpośredni dostęp
Zmiana stylów	`style`, `classList`
Tworzenie elementów	`createElement()`, `append()`
Usuwanie elementów	`remove()`, `removeChild()`
Nawigacja	`parentNode`, `children`, `nextElementSibling`

13. Wnioski

DOM to interfejs do manipulacji stroną za pomocą JavaScript
JavaScript może dynamicznie zmianiać strukturę, treść i style strony
Znajomość DOM jest kluczowa dla tworzenia interaktywnych aplikacji webowych
Nowoczesne metody (querySelector, classList, append) ułatwiają pracę z DOM

Podsumowanie praktyczne:

Opanuj querySelector(), classList, tworzenie i usuwanie elementów – to fundament interaktywności w web developmencie.

Praca z DOM w JavaScript

1. Wprowadzenie

2. Struktura DOM

3. Wybieranie elementów

3.1 getElementById()

3.2 getElementsByClassName()

3.3 getElementsByTagName()

3.4 querySelector()

3.5 querySelectorAll()