W kolejnych odcinkach często
będę używać skrótu "DOM".

Dom, dom, dom.

DOM to obiektowy model dokumentu
(Document Object Model).

Z jego pomocą przeglądarki

pozwalają projektantom
zmieniać strony poprzez JavaScript.

Ładując stronę internetową,

przeglądarka analizuje HTML i CCS,

i konwertuje dokument w DOM.

Ten DOM - to duży obiekt JavaScript,

zawierający wszystko, co chcemy
wiedzieć o stronie

lub w niej zmienić.
Każdy tag, jego atrybut i styl.

Żeby wejść do DOM-u na stronie,

z poziomu JavaScript, korzystamy
z globalnej zmiennej "document".

Możemy używać właściwości

i przywoływać funkcje
powiązane z tym obiektem.

Generalnie modyfikacji DOM-ów

dokonujemy w dwóch krokach.

Wypiszę je tutaj.

Już... I drugi krok.

Omówmy teraz każdy z nich.

Pierwszy krok - to znaleźć węzeł DOM-u

z użyciem metody dostępu.

Jeśli szukamy tylko tagu "body",

łatwo zyskamy dostęp do niego,

wpisując po prostu "document.body".

Drugi krok - to modyfikacja
znalezionego węzła

poprzez zmianę atrybutów,
stylów, wewnętrznego HTML,

dołączanie nowych węzłów...

Chcąc zamienić
zawartość całego tagu,

użyjmy właściwości "innerHTML".

`document.body.innerHTML = 
"Webpage be gone!" (Strono precz!).

Ha! Udało się!

Przeglądarka szuka zmian
w dokumencie obiektowym.

Gdy widzi, że zmieniacie
"innerHTML" w "document.body",

odzwierciedli to w dokumencie.

Pamiętajcie, dokument obiektowy
to nie jest strona internetowa,

lecz jej odzwierciedlenie,
które tworzy przeglądarka.

Jest więcej sposobów
na wykonanie kroku pierwszego,

bo zwykle interesuje was
więcej niż tag "body".

Może szukacie tagu z pewnym ID,
albo wszystkich tagów danego typu...

To omówię w odcinkach na temat
metod dostępu do modelu DOM.

Ciekawsze rzeczy można też
robić w kroku drugim,

np. zmieniać atrybuty i style
znalezionych tagów.

Pomówimy o tym w odcinkach
nt. modyfikacji DOM-u.

Gdy opanujecie dostęp i modyfikacje,

przejdziemy do świetnych zastosowań,

np. reakcji na zdarzenia użytkownika
czy animacji.

Głupio, że używamy JavaScript
do robienia tego,

co można było załatwić HTML-em,

ale najpierw dobrze opanujcie
dostęp do DOM-u i zmiany,

żeby później robić
prawdziwe interaktywne rzeczy.

Ćwiczcie - i do zobaczenia!