1
00:00:00,891 --> 00:00:06,050
W kolejnych odcinkach często
będę używać skrótu "DOM".

2
00:00:06,750 --> 00:00:08,283
Dom, dom, dom.

3
00:00:09,978 --> 00:00:15,396
DOM to obiektowy model dokumentu
(Document Object Model).

4
00:00:15,496 --> 00:00:17,105
Z jego pomocą przeglądarki

5
00:00:17,205 --> 00:00:21,370
pozwalają projektantom
zmieniać strony poprzez JavaScript.

6
00:00:21,470 --> 00:00:23,664
Ładując stronę internetową,

7
00:00:23,764 --> 00:00:26,588
przeglądarka analizuje HTML i CCS,

8
00:00:26,688 --> 00:00:29,420
i konwertuje dokument w DOM.

9
00:00:30,236 --> 00:00:33,901
Ten DOM - to duży obiekt JavaScript,

10
00:00:34,001 --> 00:00:37,523
zawierający wszystko, co chcemy
wiedzieć o stronie

11
00:00:37,623 --> 00:00:42,037
lub w niej zmienić.
Każdy tag, jego atrybut i styl.

12
00:00:43,143 --> 00:00:45,502
Żeby wejść do DOM-u na stronie,

13
00:00:45,602 --> 00:00:50,418
z poziomu JavaScript, korzystamy
z globalnej zmiennej "document".

14
00:00:50,518 --> 00:00:52,949
Możemy używać właściwości

15
00:00:53,063 --> 00:00:56,391
i przywoływać funkcje
powiązane z tym obiektem.

16
00:00:57,520 --> 00:01:01,423
Generalnie modyfikacji DOM-ów

17
00:01:01,523 --> 00:01:04,126
dokonujemy w dwóch krokach.

18
00:01:04,226 --> 00:01:07,613
Wypiszę je tutaj.

19
00:01:09,309 --> 00:01:13,451
Już... I drugi krok.

20
00:01:14,898 --> 00:01:17,440
Omówmy teraz każdy z nich.

21
00:01:17,540 --> 00:01:20,433
Pierwszy krok - to znaleźć węzeł DOM-u

22
00:01:20,533 --> 00:01:22,566
z użyciem metody dostępu.

23
00:01:23,589 --> 00:01:26,076
Jeśli szukamy tylko tagu "body",

24
00:01:26,176 --> 00:01:28,976
łatwo zyskamy dostęp do niego,

25
00:01:29,076 --> 00:01:32,166
wpisując po prostu "document.body".

26
00:01:33,582 --> 00:01:38,900
Drugi krok - to modyfikacja
znalezionego węzła

27
00:01:39,000 --> 00:01:43,443
poprzez zmianę atrybutów,
stylów, wewnętrznego HTML,

28
00:01:43,543 --> 00:01:46,037
dołączanie nowych węzłów...

29
00:01:46,137 --> 00:01:49,547
Chcąc zamienić
zawartość całego tagu,

30
00:01:50,322 --> 00:01:53,484
użyjmy właściwości "innerHTML".

31
00:01:53,584 --> 00:01:58,816
`document.body.innerHTML = 
"Webpage be gone!" (Strono precz!).

32
00:01:58,916 --> 00:02:00,387
Ha! Udało się!

33
00:02:01,906 --> 00:02:06,115
Przeglądarka szuka zmian
w dokumencie obiektowym.

34
00:02:06,215 --> 00:02:10,084
Gdy widzi, że zmieniacie
"innerHTML" w "document.body",

35
00:02:10,184 --> 00:02:12,519
odzwierciedli to w dokumencie.

36
00:02:13,450 --> 00:02:17,613
Pamiętajcie, dokument obiektowy
to nie jest strona internetowa,

37
00:02:17,713 --> 00:02:22,677
lecz jej odzwierciedlenie,
które tworzy przeglądarka.

38
00:02:24,029 --> 00:02:28,660
Jest więcej sposobów
na wykonanie kroku pierwszego,

39
00:02:28,760 --> 00:02:32,807
bo zwykle interesuje was
więcej niż tag "body".

40
00:02:32,907 --> 00:02:37,506
Może szukacie tagu z pewnym ID,
albo wszystkich tagów danego typu...

41
00:02:37,606 --> 00:02:41,453
To omówię w odcinkach na temat
metod dostępu do modelu DOM.

42
00:02:41,553 --> 00:02:45,414
Ciekawsze rzeczy można też
robić w kroku drugim,

43
00:02:45,514 --> 00:02:48,894
np. zmieniać atrybuty i style
znalezionych tagów.

44
00:02:48,994 --> 00:02:52,572
Pomówimy o tym w odcinkach
nt. modyfikacji DOM-u.

45
00:02:52,672 --> 00:02:56,378
Gdy opanujecie dostęp i modyfikacje,

46
00:02:56,478 --> 00:02:58,886
przejdziemy do świetnych zastosowań,

47
00:02:58,986 --> 00:03:02,930
np. reakcji na zdarzenia użytkownika
czy animacji.

48
00:03:03,030 --> 00:03:06,419
Głupio, że używamy JavaScript
do robienia tego,

49
00:03:06,519 --> 00:03:09,912
co można było załatwić HTML-em,

50
00:03:10,012 --> 00:03:14,614
ale najpierw dobrze opanujcie
dostęp do DOM-u i zmiany,

51
00:03:14,714 --> 00:03:18,937
żeby później robić
prawdziwe interaktywne rzeczy.

52
00:03:19,037 --> 00:03:21,011
Ćwiczcie - i do zobaczenia!