JavaScript: Czym jest DOM

0:00Tym rozdziałem rozpoczniemy poznawanie

0:02DOMu i

0:03na początek odpowiedzmy sobie na pytanie czym w

0:05zasadzie jest DOM?

0:07DOM jest to skrót od Document Object Model z angielskiego

0:10czyli po polsku Obiektowy Model Dokumentu.

0:12Wyobraźmy sobie taki kod HTML. Mamy tutaj

0:16najprostszą możliwą stronę internetową.

0:18Dla nas jest to tylko kod HTML, a więc jakiś tekst i w momencie

0:21kiedy przeglądarka wyśle zapytanie do serwera

0:24od serwera otrzymuje

0:25właśnie taki tekst, czyli kod HTML i na jego

0:28podstawie tworzy drzewo dokumentu.

0:30To drzewo w przypadku dokładnie tego kodu

0:32HTML będzie wyglądać w ten sposób.

0:35Jak widzisz na samej górze będziemy mieli Document, to jest taki główny element

0:38a potem wszystkie jego dzieci,

0:40takie jak html, w którym znajduje się head, title czy np.

0:44body, no i wszystkie pozostałe

0:46elementy. I jak możesz zobaczyć każdy z tych

0:48elementów, to jest albo element HTML, albo np.

0:51tekst. Dlatego, że w

0:52Obiektowym Modelu Dokumentu mamy różne rodzaje węzłów,

0:55ale wszystkie te elementy, które

0:57widzisz po prawej stronie

0:58są to tak zwane węzły.

1:00Zatem jeżeli przyjrzymy się np.

1:02temu tekstowi

1:03Treść paragrafu, to jest to węzeł tekstowy, którego

1:05rodzicem jest element p.

1:07W przypadku takiego drzewa możemy mówić o relacjach takich jak w rodzinie, czyli np.

1:11o rodzeństwie i powiedzielibyśmy, że

1:14dla elementu body jego rodzeństwem jest element head,

1:18natomiast jego dziećmi czy

1:19potomkami są elementy takie jak div, a następnie p.

1:23W przypadku

1:23paragrafu jego rodzicem będzie element div, natomiast

1:27jego przodkiem będzie element body, a także html.

1:30O tych wszystkich relacjach powiemy sobie jeszcze później, kiedy

1:33będziemy konkretnie

1:34się do nich odwoływać w kodzie.

1:36Kiedy mamy już takie drzewo dokumentu utworzone

1:38i strona internetowa się

1:39wczyta, to z poziomu kodu JavaScript możemy korzystać

1:42z tak zwanego DOM API.

1:44API jest to skrót od Application Programming Interface

1:47i takie API pozwala nam między innymi na modyfikowanie i tworzenie elementów HTML.

1:53A zatem jeżeli na początku, kiedy nasza strona się wczytywała

1:56niektórych elementów na stronie HTML nie było

1:59to my możemy je dynamicznie utworzyć z

2:01poziomu języka JavaScript i wstawić na stronę.

2:04Podobnie możemy modyfikować już istniejące elementy.

2:07Możemy również manipulować

2:08stylami i klasami CSS, aby zmieniać wygląd

2:11strony już po tym

2:12jak ona została wczytana, np.

2:14kiedy ktoś kliknie

2:15na jakiś przycisk.

2:16Jeśli chodzi o takie kliknięcia

2:18to możemy w tym DOM API

2:19również zastosować coś, co nazywa się obsługą zdarzeń.

2:23Czyli możemy powiedzieć, że jeżeli ktoś kliknie w jakiś przycisk

2:26chcemy wykonać jakiś kod i ten kod może np.

2:29wczytać dodatkowe dane z serwera i wstawić je na stronę.

2:33Oprócz DOM API w przeglądarce są jeszcze inne

2:36tego typu API i one pozwalają nam między innymi na wysyłanie zapytań HTTP

2:41właśnie po to, żeby coś dodatkowo pobrać z serwera i np.

2:44wstawić na stronę,

2:45możemy odtwarzać multimedia

2:47czyli np. stworzyć

2:48multimedialny odtwarzacz filmów

2:50albo audio,

2:51możemy wyświetlać powiadomienia push czy np.

2:54odczytywać geolokalizację użytkownika.

2:56A więc wszystkie te rzeczy

2:57zrealizujemy za pomocą

2:59języka JavaScript, ale one nie

3:01są częścią języka JavaScript, tylko są

3:03udostępniane w przeglądarce internetowej przez

3:05właśnie takie specjalne API.

3:07Posługując się językiem JavaScript, wszystkie z tych rzeczy oraz

3:10wiele więcej będziemy mogli wykonać.

3:12No i jeszcze jedną rzeczą, którą na

3:14przykład możemy zrobić, będzie tworzenie gier

3:16za pomocą tzw.

3:18elementu canvas. Jak zatem

3:20widzisz Obiektowy Model Dokumentu

3:21to jest po prostu drzewiasta struktura wszystkich

3:23elementów HTML i do każdego

3:25z tych elementów możemy się następnie odwołać

3:27w kodzie JavaScript

3:29i albo do takiego elementu dodać inne elementy, albo zmienić jakieś jego

3:32style, klasy czy atrybuty,

3:34a także w przeglądarce możemy wykonać

3:36jeszcze więcej czynności, o których powiedziałem teraz.