WEBVTT

00:00:00.891 --> 00:00:06.050
W kolejnych odcinkach często
będę używać skrótu "DOM".

00:00:06.750 --> 00:00:08.283
Dom, dom, dom.

00:00:09.978 --> 00:00:15.396
DOM to obiektowy model dokumentu
(Document Object Model).

00:00:15.496 --> 00:00:17.105
Z jego pomocą przeglądarki

00:00:17.205 --> 00:00:21.370
pozwalają projektantom
zmieniać strony poprzez JavaScript.

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

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

00:00:26.688 --> 00:00:29.420
i konwertuje dokument w DOM.

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

00:00:34.001 --> 00:00:37.523
zawierający wszystko, co chcemy
wiedzieć o stronie

00:00:37.623 --> 00:00:42.037
lub w niej zmienić.
Każdy tag, jego atrybut i styl.

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

00:00:45.602 --> 00:00:50.418
z poziomu JavaScript, korzystamy
z globalnej zmiennej "document".

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

00:00:53.063 --> 00:00:56.391
i przywoływać funkcje
powiązane z tym obiektem.

00:00:57.520 --> 00:01:01.423
Generalnie modyfikacji DOM-ów

00:01:01.523 --> 00:01:04.126
dokonujemy w dwóch krokach.

00:01:04.226 --> 00:01:07.613
Wypiszę je tutaj.

00:01:09.309 --> 00:01:13.451
Już... I drugi krok.

00:01:14.898 --> 00:01:17.440
Omówmy teraz każdy z nich.

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

00:01:20.533 --> 00:01:22.566
z użyciem metody dostępu.

00:01:23.589 --> 00:01:26.076
Jeśli szukamy tylko tagu "body",

00:01:26.176 --> 00:01:28.976
łatwo zyskamy dostęp do niego,

00:01:29.076 --> 00:01:32.166
wpisując po prostu "document.body".

00:01:33.582 --> 00:01:38.900
Drugi krok - to modyfikacja
znalezionego węzła

00:01:39.000 --> 00:01:43.443
poprzez zmianę atrybutów,
stylów, wewnętrznego HTML,

00:01:43.543 --> 00:01:46.037
dołączanie nowych węzłów...

00:01:46.137 --> 00:01:49.547
Chcąc zamienić
zawartość całego tagu,

00:01:50.322 --> 00:01:53.484
użyjmy właściwości "innerHTML".

00:01:53.584 --> 00:01:58.816
`document.body.innerHTML = 
"Webpage be gone!" (Strono precz!).

00:01:58.916 --> 00:02:00.387
Ha! Udało się!

00:02:01.906 --> 00:02:06.115
Przeglądarka szuka zmian
w dokumencie obiektowym.

00:02:06.215 --> 00:02:10.084
Gdy widzi, że zmieniacie
"innerHTML" w "document.body",

00:02:10.184 --> 00:02:12.519
odzwierciedli to w dokumencie.

00:02:13.450 --> 00:02:17.613
Pamiętajcie, dokument obiektowy
to nie jest strona internetowa,

00:02:17.713 --> 00:02:22.677
lecz jej odzwierciedlenie,
które tworzy przeglądarka.

00:02:24.029 --> 00:02:28.660
Jest więcej sposobów
na wykonanie kroku pierwszego,

00:02:28.760 --> 00:02:32.807
bo zwykle interesuje was
więcej niż tag "body".

00:02:32.907 --> 00:02:37.506
Może szukacie tagu z pewnym ID,
albo wszystkich tagów danego typu...

00:02:37.606 --> 00:02:41.453
To omówię w odcinkach na temat
metod dostępu do modelu DOM.

00:02:41.553 --> 00:02:45.414
Ciekawsze rzeczy można też
robić w kroku drugim,

00:02:45.514 --> 00:02:48.894
np. zmieniać atrybuty i style
znalezionych tagów.

00:02:48.994 --> 00:02:52.572
Pomówimy o tym w odcinkach
nt. modyfikacji DOM-u.

00:02:52.672 --> 00:02:56.378
Gdy opanujecie dostęp i modyfikacje,

00:02:56.478 --> 00:02:58.886
przejdziemy do świetnych zastosowań,

00:02:58.986 --> 00:03:02.930
np. reakcji na zdarzenia użytkownika
czy animacji.

00:03:03.030 --> 00:03:06.419
Głupio, że używamy JavaScript
do robienia tego,

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

00:03:10.012 --> 00:03:14.614
ale najpierw dobrze opanujcie
dostęp do DOM-u i zmiany,

00:03:14.714 --> 00:03:18.937
żeby później robić
prawdziwe interaktywne rzeczy.

00:03:19.037 --> 00:03:21.011
Ćwiczcie - i do zobaczenia!