1
00:00:00,600 --> 00:00:03,770
Do tej pory rozmawialiśmy o tym, dlaczego dominują nazwa jest ekscytujące.

2
00:00:03,960 --> 00:00:05,100
Dlaczego należy dbać.

3
00:00:05,100 --> 00:00:09,420
Poszczególne strony używające jej nieograniczone możliwości igrzysk wszystkich ekscytujących rzeczy.

4
00:00:09,570 --> 00:00:12,710
Ale wciąż tak naprawdę nie rozmawialiśmy o tym, co właściwie jest DOM.

5
00:00:12,810 --> 00:00:16,380
Więc mamy zamiar zrobić w tym filmie, aby rozpocząć niech po prostu zdefiniować.

6
00:00:16,380 --> 00:00:17,180
Dio am.

7
00:00:17,220 --> 00:00:20,040
Dom stoi na modelu obiektów dokumentu.

8
00:00:20,190 --> 00:00:24,100
Znaczenie tych trzech słowach zrobi się trochę więcej sensu w kolejnych slajdach.

9
00:00:24,100 --> 00:00:26,780
Ale zacznijmy od zdefiniowania go na wyższym poziomie.

10
00:00:26,820 --> 00:00:30,560
DOM jest interfejs między JavaScript i wieku.

11
00:00:30,570 --> 00:00:48,930
Tim Mounty SS to w zasadzie pęczek obiektów specjalnych metod języka JavaScript funkcji, które możemy wykorzystać do interakcji z naszej H.M.S. oceniają możemy zmienić ten stan rzeczy możemy dodać elementy usunąć elementy zmienić kolory animowanie rzeczy wszelkiego rodzaju ekscytujących sposobów na interakcję z ich H.M.S. oszacować.

12
00:00:49,380 --> 00:00:56,070
Na tym slajdzie porozmawiać trochę o tym, w jaki sposób DOM jest wykonana i dlatego nazywa się model obiektowy dokumentu.

13
00:00:56,070 --> 00:01:09,950
Więc kiedy załadować stronę e-mail wygląda to w przeglądarce, a to tylko kilka prostych krawędziach go więc masz tytuł i tag z mojego linku jako tekst i H-1 z moim nagłówku jako tekst i to to.

14
00:01:10,260 --> 00:01:16,360
Więc kiedy mogę otworzyć tego w przeglądarce widzę tego, ale za kulisami DOM jest tworzony.

15
00:01:16,380 --> 00:01:19,190
Jest zbudowana z tym tutaj.

16
00:01:19,320 --> 00:01:24,270
Więc co mam na myśli to, że w tym wieku Tim przekształcony pęczek obiektów JavaScript.

17
00:01:24,270 --> 00:01:27,440
Każdy z modeli obiektów jeden z tych elementów.

18
00:01:27,450 --> 00:01:31,340
To miejsce, gdzie możemy uzyskać model obiektowy część modelu obiektów dokumentu.

19
00:01:31,650 --> 00:01:38,060
Więc jeszcze raz po prostu powtórzyć możemy załadować każdy zespół w przeglądarce przeglądarka wyświetla rzeczy do nas w ten sposób.

20
00:01:38,220 --> 00:01:47,490
Ale za kulisami faktycznie sprawia, że ​​ten model każdego elementu z JavaScript Object podobnie jak my modelowanego mój pies Rusty użyciu JavaScript Object.

21
00:01:47,490 --> 00:01:50,770
Miał nazwę właściwości oraz drugi rasę i wiek.

22
00:01:50,850 --> 00:01:55,080
Te cele są zasadniczo takie samo, z wyjątkiem zawartości jest inna.

23
00:01:55,110 --> 00:02:07,290
Zamierzają mieć takie rzeczy jak rodzaj źródła tekstu atrybuty znacznika koloru tła Rozmiar tekstu Kolor wszystkie różne właściwości, które są zawarte wewnątrz każdego obiektu.

24
00:02:07,290 --> 00:02:11,620
My na pewno będziemy spędzać dużo czasu w pracy z tych obiektów, więc specyfika nie są ważne.

25
00:02:11,640 --> 00:02:14,970
Wszystko, co chcę podkreślić, jest to, że możemy załadować każdy tim L ..

26
00:02:15,120 --> 00:02:22,610
Jest wyświetlany w przeglądarce, a przeglądarka zatrzymuje Tim L i zajmuje każdy element i zamienia ją w obiekt.

27
00:02:22,680 --> 00:02:24,510
Tak, że obejmuje model obiektowy część.

28
00:02:24,540 --> 00:02:25,860
Co z tego dokumentu.

29
00:02:26,070 --> 00:02:38,930
Więc można zobaczyć tutaj to trochę schemat rodzaju konstrukcji, które otrzymujemy od DOM górna przedmiotem poziomu, że wszystko znajduje się wewnątrz całego naszego modelu H.T. mounseers nas nazywa się dokument.

30
00:02:39,120 --> 00:02:41,200
Tak więc możemy przejść do dowolnej strony internetowej w ogóle.

31
00:02:41,220 --> 00:02:45,190
Więc mam Google otwarte i jestem po prostu zamiar wpisać con. Dokument słowem.

32
00:02:45,390 --> 00:02:49,470
I kiedy to zrobić otrzymuję ten przebój, który wraca ten wielki obiekt.

33
00:02:49,470 --> 00:02:51,900
Tylko, że to nie wygląda javascript obiektu.

34
00:02:51,900 --> 00:02:53,740
To naprawdę nie jest, co by się spodziewać.

35
00:02:53,760 --> 00:02:56,030
To dlatego, że przeglądarka jest rodzajem ukrywając go ode mnie.

36
00:02:56,130 --> 00:03:04,480
Co to właściwie jest pokazanie mi jest z pocztą HQ wygląda jak tekst, ale to nie pokazuje mi rzeczywistych obiektów, które są wzorowane na tym Timo.

37
00:03:04,740 --> 00:03:19,990
Tak, aby uzyskać że musimy użyć anulować dot d I R, który ma innej metody na obiekcie konsoli i będziemy anulować tę D.I.R. Dokument wszystkim, że będzie to zrobić, to wydruk całego obiektu dokumentu w tym obiekcie składni, że jesteśmy zaznajomieni.

38
00:03:20,070 --> 00:03:30,220
Więc widać, że to po prostu zwykły przedmiot, podobnie jak te, które mamy napisane na własną rękę tak samo jak pies Rusty obiekt wyjątkiem jest dużo więcej informacji tutaj.

39
00:03:30,510 --> 00:03:41,040
Mamy więc takie rzeczy jak czcionki lub obrazy łączy, ale mamy też takie rzeczy jak ciało i to ciało reprezentuje całe ciało.

40
00:03:41,040 --> 00:03:44,320
Więc każdy element, który można zobaczyć tutaj jest wewnątrz ciała.

41
00:03:44,340 --> 00:03:51,050
Więc jeśli mogę otworzyć ciało aż zobaczysz, że mamy całą masę innych właściwości, w tym jeden o nazwie węzłów dziecka.

42
00:03:51,150 --> 00:03:58,590
Więc węzły potomne pokazuje nam, że istnieje div tam tag scenariusz i nie ma innego div wewnątrz ciała.

43
00:03:58,590 --> 00:04:00,710
A jeśli udaliśmy się do elementów, które chcielibyśmy zobaczyć.

44
00:04:00,710 --> 00:04:03,360
Więc oto ciało wewnątrz ciała.

45
00:04:03,420 --> 00:04:07,990
Mamy ten pierwszy div mamy tag skryptu i mamy drugi div.

46
00:04:08,430 --> 00:04:15,890
I co wtedy powiedzieć, że otwierają się, że trzecia div spodziewalibyśmy się zobaczyć dwa kolejne div wewnątrz jeśli tego drugiego div.

47
00:04:15,900 --> 00:04:28,360
A jeśli podejdziemy do konsula i spojrzymy na drugi div, a następnie przyjrzymy węzłów potomnych widzimy OK tam dwa DIV Więc jak można zobaczyć dom robi się naprawdę ogromna naprawdę szybko.

48
00:04:28,500 --> 00:04:34,730
Tam setki różnych właściwościach i metodach i różnych węzłów i cały ten szalony Struktura zagnieżdżonych obiektów.

49
00:04:34,890 --> 00:04:36,250
Jest tak wiele rzeczy.

50
00:04:36,270 --> 00:04:42,060
To jedna z tych chwil, które wymieniłem na początku tej klasie, gdzie masz zamiar muszą być wygodne, nie wiedząc wszystkiego.

51
00:04:42,420 --> 00:04:46,450
Mogę powiedzieć, że teraz większość deweloperów nie wiem pół właściwości tutaj.

52
00:04:46,500 --> 00:04:49,200
Powiedziałbym, że działają one z około 10 procent w większości.

53
00:04:49,200 --> 00:04:52,630
Jest tak wiele więcej rzeczy, które tu prawie nigdy nie musimy używać.

54
00:04:52,680 --> 00:04:57,280
A potem gdzieś w dół linia pojawia się coś, a my musimy zrobić coś, czego nigdy wcześniej nie robiłem.

55
00:04:57,330 --> 00:05:03,690
Mamy google i znaleźć się w porządku oh tak to właśnie właściwość zmiany nieutwardzony jest.

56
00:05:03,750 --> 00:05:04,560
Nie mam pojęcia.

57
00:05:04,680 --> 00:05:06,500
I tak naprawdę, co to znaczy być programistą.

58
00:05:06,510 --> 00:05:14,380
Do tej pory z javascript pracujemy w trochę małego kontrolowanym świecie, gdzie możemy dowiedzieć się o funkcjach i obiektów dowiadujemy się o zmiennych.

59
00:05:14,610 --> 00:05:21,440
I nie ma skończoną ilość sposobów robienia rzeczy, a tam jest bardzo specyficzny podzbiór świadomością, że po prostu trzeba wiedzieć z DOM.

60
00:05:21,450 --> 00:05:25,500
Teraz mamy ten ogromny ogromny ekosystem do pracy w tak wielu właściwości.

61
00:05:25,620 --> 00:05:28,020
Więc po prostu chcą powtórzyć jest tak dużo tutaj.

62
00:05:28,170 --> 00:05:32,100
Zamierzamy skupić się na ważnych elementów, ale cel jest nie do zapamiętania.

63
00:05:32,130 --> 00:05:34,780
Celem jest nie do opanowania każdą nieruchomość.

64
00:05:34,920 --> 00:05:39,560
Znowu 10 procent co najwyżej jest wszystko, co trzeba być kompetentnym web developer.

65
00:05:40,000 --> 00:05:43,080
OK, więc wróćmy a ja po prostu chce przejść nad tym jeszcze raz.

66
00:05:43,080 --> 00:05:44,450
Podsumujmy czym rozmawialiśmy.

67
00:05:44,700 --> 00:05:48,030
Więc DOM oznacza obiektowego modelu dokumentu.

68
00:05:48,150 --> 00:05:52,150
Jest to interfejs między JavaScript i swojej H.M.S ..

69
00:05:52,280 --> 00:05:55,180
To w jaki sposób możemy wykorzystać naszą JavaScript, aby rzeczy interaktywne.

70
00:05:55,260 --> 00:06:19,110
To jak to robimy rzeczy, jak dodać nowy element do strony lub zmienić atrybut ref łącza lub zmienić obraz tła na nasz organizm i jak możemy uzyskać wartość z formularza lub możemy zrobić niestandardowych walidacji i animacji i interaktywnych elementy gdzie należy kliknąć w jakiś kod uruchamia wszystkie te różne możliwości wszystkim wynikała z faktu, że model obiektowy dokumentu łączy nasz skrypt z ich HMS dostępu.

71
00:06:19,260 --> 00:06:27,470
Tak więc model obiektowy częścią obiektowego modelu dokumentu, mówi nam, że jest to grono obiektów JavaScript, które są elementy w naszej H.T. modelowania ilość.

72
00:06:27,870 --> 00:06:32,980
Więc mamy ATAC tu skończyć z obiektu tutaj reprezentujące atec.

73
00:06:33,180 --> 00:06:37,770
A potem możemy skończyć z innego obiektu reprezentującego ten tag H1, które widzimy tutaj.

74
00:06:37,980 --> 00:06:43,740
Wreszcie to się nazywa modelu obiektów dokumentu, ponieważ wszystko, co żyje wewnątrz tego jednego obiektu o nazwie dokumentu.

75
00:06:43,830 --> 00:06:46,850
Jest to węzeł główny, w którym wszystko żyje wewnątrz.

76
00:06:47,070 --> 00:06:49,030
Więc następnym filmie mamy zamiar rozpocząć pisanie kodu.