0:00:00.891,0:00:06.050
W kolejnych odcinkach często[br]będę używać skrótu "DOM".

0:00:06.750,0:00:08.283
Dom, dom, dom.

0:00:09.978,0:00:15.396
DOM to obiektowy model dokumentu[br](Document Object Model).

0:00:15.496,0:00:17.105
Z jego pomocą przeglądarki

0:00:17.205,0:00:21.370
pozwalają projektantom[br]zmieniać strony poprzez JavaScript.

0:00:21.470,0:00:23.664
Ładując stronę internetową,

0:00:23.764,0:00:26.588
przeglądarka analizuje HTML i CCS,

0:00:26.688,0:00:29.420
i konwertuje dokument w DOM.

0:00:30.236,0:00:33.901
Ten DOM - to duży obiekt JavaScript,

0:00:34.001,0:00:37.523
zawierający wszystko, co chcemy[br]wiedzieć o stronie

0:00:37.623,0:00:42.037
lub w niej zmienić.[br]Każdy tag, jego atrybut i styl.

0:00:43.143,0:00:45.502
Żeby wejść do DOM-u na stronie,

0:00:45.602,0:00:50.418
z poziomu JavaScript, korzystamy[br]z globalnej zmiennej "document".

0:00:50.518,0:00:52.949
Możemy używać właściwości

0:00:53.063,0:00:56.391
i przywoływać funkcje[br]powiązane z tym obiektem.

0:00:57.520,0:01:01.423
Generalnie modyfikacji DOM-ów

0:01:01.523,0:01:04.126
dokonujemy w dwóch krokach.

0:01:04.226,0:01:07.613
Wypiszę je tutaj.

0:01:09.309,0:01:13.451
Już... I drugi krok.

0:01:14.898,0:01:17.440
Omówmy teraz każdy z nich.

0:01:17.540,0:01:20.433
Pierwszy krok - to znaleźć węzeł DOM-u

0:01:20.533,0:01:22.566
z użyciem metody dostępu.

0:01:23.589,0:01:26.076
Jeśli szukamy tylko tagu "body",

0:01:26.176,0:01:28.976
łatwo zyskamy dostęp do niego,

0:01:29.076,0:01:32.166
wpisując po prostu "document.body".

0:01:33.582,0:01:38.900
Drugi krok - to modyfikacja[br]znalezionego węzła

0:01:39.000,0:01:43.443
poprzez zmianę atrybutów,[br]stylów, wewnętrznego HTML,

0:01:43.543,0:01:46.037
dołączanie nowych węzłów...

0:01:46.137,0:01:49.547
Chcąc zamienić[br]zawartość całego tagu,

0:01:50.322,0:01:53.484
użyjmy właściwości "innerHTML".

0:01:53.584,0:01:58.816
`document.body.innerHTML = [br]"Webpage be gone!" (Strono precz!).

0:01:58.916,0:02:00.387
Ha! Udało się!

0:02:01.906,0:02:06.115
Przeglądarka szuka zmian[br]w dokumencie obiektowym.

0:02:06.215,0:02:10.084
Gdy widzi, że zmieniacie[br]"innerHTML" w "document.body",

0:02:10.184,0:02:12.519
odzwierciedli to w dokumencie.

0:02:13.450,0:02:17.613
Pamiętajcie, dokument obiektowy[br]to nie jest strona internetowa,

0:02:17.713,0:02:22.677
lecz jej odzwierciedlenie,[br]które tworzy przeglądarka.

0:02:24.029,0:02:28.660
Jest więcej sposobów[br]na wykonanie kroku pierwszego,

0:02:28.760,0:02:32.807
bo zwykle interesuje was[br]więcej niż tag "body".

0:02:32.907,0:02:37.506
Może szukacie tagu z pewnym ID,[br]albo wszystkich tagów danego typu...

0:02:37.606,0:02:41.453
To omówię w odcinkach na temat[br]metod dostępu do modelu DOM.

0:02:41.553,0:02:45.414
Ciekawsze rzeczy można też[br]robić w kroku drugim,

0:02:45.514,0:02:48.894
np. zmieniać atrybuty i style[br]znalezionych tagów.

0:02:48.994,0:02:52.572
Pomówimy o tym w odcinkach[br]nt. modyfikacji DOM-u.

0:02:52.672,0:02:56.378
Gdy opanujecie dostęp i modyfikacje,

0:02:56.478,0:02:58.886
przejdziemy do świetnych zastosowań,

0:02:58.986,0:03:02.930
np. reakcji na zdarzenia użytkownika[br]czy animacji.

0:03:03.030,0:03:06.419
Głupio, że używamy JavaScript[br]do robienia tego,

0:03:06.519,0:03:09.912
co można było załatwić HTML-em,

0:03:10.012,0:03:14.614
ale najpierw dobrze opanujcie[br]dostęp do DOM-u i zmiany,

0:03:14.714,0:03:18.937
żeby później robić[br]prawdziwe interaktywne rzeczy.

0:03:19.037,0:03:21.011
Ćwiczcie - i do zobaczenia!