Narzędzia Deweloperskie w Przeglądarce: Drzewo DOM

0:00W tej lekcji chcę ci pokazać jak wygląda drzewo

0:04DOM i czym ono z grubsza jest więc otworzymy sobie narzędzia deweloperskie wybierzemy

0:08tutaj inspect i zauważ że nam się tutaj od razu pojawia takie drzewo

0:12które sprawia wrażenie że jest to po prostu kod html natomiast należy odróżnić

0:17dwie rzeczy jeżeli sobie przyjdę do zobacz źródło strony czyli tutaj view

0:21page source to to jest źródło strony a więc to jest dokładnie kod html

0:25a więc instrukcje dla przeglądarki jak ma wyrenderować

0:29stronę to jest zawsze do nas przesyłane z serwera w moim przypadku z serwera

0:34lokalnego oczywiście można również tworzyć plik index.html ale na przykład wtedy

0:38też przeglądarka nam to wyrenderuje ale jest to tylko tekst który oczywiście my

0:42piszemy zazwyczaj czasami ręcznie czasami jest on w jakiś sposób generowany z różnych

0:46narzędzi ale jest to tekst i to tutaj się nie zmienia nieważne

0:50kiedy otworzę sobie podgląd źródła strony tutaj zawsze

0:55będziemy wiedzieć dokładnie to samo natomiast czym jest drzewo

0:59DOM otóż przeglądarka parsuje sobie taki dokument linijka

1:03po linijce i tworzy jego reprezentację w postaci obiektów i

1:07w całości to wszystko nazywamy drzewem dom dlaczego drzewem otóż

1:11dlatego że ma taką drzewiastą strukturę na przykład element body można powiedzieć że

1:15ma wiele dzieci na przykład jednym jego dzieckiem jest header następnie

1:19kolejnym dzieckiem tutaj w headerze jest ten element div i tak

1:23dalej no i oczywiście tutaj może być więcej dzieci na tym poziomie tak jak widzimy jeden

1:27div i tutaj element nav i tak dalej więc patrząc z góry na dół to jest taka

1:32drzewiasta struktura w zasadzie będzie to taka struktura odwróconego drzewa

1:36i dlatego nazywamy to drzewem dom natomiast to co widzisz tutaj

1:40być może zauważyłeś że z grubsza różni się od tego co widzieliśmy przed momentem

1:44dlatego że tutaj widzimy w zakładce elements żywą strukturę

1:49dokumentu i co to oznacza otóż jeżeli jeszcze raz sobie przejdziemy tutaj do view page

1:53source to w momencie jak przeglądarka wczytuje sobie cały

1:57ten kod i tworzy drzewo don wczytuje również style a także co

2:01bardzo istotne skrypty tutaj mamy różne skrypty javascriptowe

2:05i to co jest ważne to skrypt javascriptowy ma możliwość

2:09modyfikacji drzewa dom i tak też stało się na tej stronie na przykład mamy

2:13tutaj taki slider który nam pozwala na przewijanie i on został

2:18tutaj utworzony z użyciem języka javascript a więc można powiedzieć że

2:22fizycznie musiał taki element czy seria elementów w drzewie dom

2:26musiały być utworzone chociaż nie było ich tutaj można powiedzieć od

2:30razu w takiej formie w kodzie html więc pamiętaj

2:34że tutaj podglądając sobie to drzewo zawsze będziesz widział aktualną

2:38reprezentacje czyli dokładnie to co można powiedzieć widzi przeglądarka

2:42jeżeli tutaj się coś będzie zmieniać na przykład przewidujemy zauważ że tutaj jakieś

2:46style na tym elemencie się zmieniają mimo tego że tych styli w kodzie html

2:50nigdzie nie zapisaliśmy one są tutaj dodawane z użyciem

2:55języka javascript zauważ jedną bardzo ważną rzecz jak sobie

2:59tutaj najeżdżam na te elementy w drzwie dom na stronie również są one podświetlane i

3:03może zrobię tutaj trochę miejsca albo pokażę ci fajną opcję że możemy zadokować sobie

3:07chrome devtools na przykład do prawej strony i wtedy będziemy tutaj

3:11mieli naszą stronę a tutaj będziemy mieli całe to narzędzie

3:16oczywiście lepiej byłoby mieć troszkę więcej miejsca ja na co dzień pracuję na większym

3:20monitorze więc trochę lepiej to się nam będzie wtedy mieścić nie mniej jednak mogę

3:24najeżdżać na elementy i te elementy na stronie są podświetlane widzę również

3:28ich rozmiary i tak dalej jeżeli chciałbym konkretny element

3:32sobie znaleźć to albo muszę tutaj najeżdżając na te elementy sobie zidentyfikować

3:37albo mogę to zrobić prościej otóż jeżeli kliknę na konkretny element na

3:41przykład na tą kropkę prawym przyciskiem i wybierę inspect to dokładnie ona

3:45w drzewie dom zostanie podświetlona od razu widzimy gdzie się znajduje w jakich elementach i

3:49jakie są jej style do których jeszcze przyjdziemy później i masę

3:53innych rzeczy jeszcze do tego możemy znaleźć innym sposobem jest kliknięcie tutaj na

3:58taką ikonkę i wtedy możemy na stronie zaznaczyć to co nas interesuje przy

4:03okazji zauważ że mamy tutaj fajny tooltip które który najważniejsze style nam

4:07pokazuje i teraz jeżeli kliknę taki przycisk to jeżeli on był

4:11klikalny nie został kliknięty czyli na przykład nie zostałem przeniesiony na docelową

4:15stronę tylko tutaj w panelu element został ten element

4:19zaznaczony więc w ten sposób możemy również konkretny element zbadać

4:23albo prawym przyciskiem inspect albo ta strzałeczka i wybieramy konkretny

4:28element okej to tyle takim tytułem wstępu chciałem ci po prostu pokazać

4:32różnice między kodem html a drzewem dom które jest tutaj na

4:36żywo wyświetlane natomiast więcej informacji na ten temat znajdziesz w lekcji

4:40którą możesz teraz kliknąć sobie na linii czasu z kursu javascript od podstaw gdzie

4:45dokładniej tłumaczę jeszcze czym jest obiektowy model dokumentu