Do tej pory rozmawialiśmy o tym, dlaczego dominują nazwa jest ekscytujące.
Dlaczego należy dbać.
Poszczególne strony używające jej nieograniczone możliwości igrzysk wszystkich ekscytujących rzeczy.
Ale wciąż tak naprawdę nie rozmawialiśmy o tym, co właściwie jest DOM.
Więc mamy zamiar zrobić w tym filmie, aby rozpocząć niech po prostu zdefiniować.
Dio am.
Dom stoi na modelu obiektów dokumentu.
Znaczenie tych trzech słowach zrobi się trochę więcej sensu w kolejnych slajdach.
Ale zacznijmy od zdefiniowania go na wyższym poziomie.
DOM jest interfejs między JavaScript i wieku.
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ć.
Na tym slajdzie porozmawiać trochę o tym, w jaki sposób DOM jest wykonana i dlatego nazywa się model obiektowy dokumentu.
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.
Więc kiedy mogę otworzyć tego w przeglądarce widzę tego, ale za kulisami DOM jest tworzony.
Jest zbudowana z tym tutaj.
Więc co mam na myśli to, że w tym wieku Tim przekształcony pęczek obiektów JavaScript.
Każdy z modeli obiektów jeden z tych elementów.
To miejsce, gdzie możemy uzyskać model obiektowy część modelu obiektów dokumentu.
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.
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.
Miał nazwę właściwości oraz drugi rasę i wiek.
Te cele są zasadniczo takie samo, z wyjątkiem zawartości jest inna.
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.
My na pewno będziemy spędzać dużo czasu w pracy z tych obiektów, więc specyfika nie są ważne.
Wszystko, co chcę podkreślić, jest to, że możemy załadować każdy tim L ..
Jest wyświetlany w przeglądarce, a przeglądarka zatrzymuje Tim L i zajmuje każdy element i zamienia ją w obiekt.
Tak, że obejmuje model obiektowy część.
Co z tego dokumentu.
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.
Tak więc możemy przejść do dowolnej strony internetowej w ogóle.
Więc mam Google otwarte i jestem po prostu zamiar wpisać con. Dokument słowem.
I kiedy to zrobić otrzymuję ten przebój, który wraca ten wielki obiekt.
Tylko, że to nie wygląda javascript obiektu.
To naprawdę nie jest, co by się spodziewać.
To dlatego, że przeglądarka jest rodzajem ukrywając go ode mnie.
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.
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.
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.
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.
Więc każdy element, który można zobaczyć tutaj jest wewnątrz ciała.
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.
Więc węzły potomne pokazuje nam, że istnieje div tam tag scenariusz i nie ma innego div wewnątrz ciała.
A jeśli udaliśmy się do elementów, które chcielibyśmy zobaczyć.
Więc oto ciało wewnątrz ciała.
Mamy ten pierwszy div mamy tag skryptu i mamy drugi div.
I co wtedy powiedzieć, że otwierają się, że trzecia div spodziewalibyśmy się zobaczyć dwa kolejne div wewnątrz jeśli tego drugiego div.
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.
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.
Jest tak wiele rzeczy.
To jedna z tych chwil, które wymieniłem na początku tej klasie, gdzie masz zamiar muszą być wygodne, nie wiedząc wszystkiego.
Mogę powiedzieć, że teraz większość deweloperów nie wiem pół właściwości tutaj.
Powiedziałbym, że działają one z około 10 procent w większości.
Jest tak wiele więcej rzeczy, które tu prawie nigdy nie musimy używać.
A potem gdzieś w dół linia pojawia się coś, a my musimy zrobić coś, czego nigdy wcześniej nie robiłem.
Mamy google i znaleźć się w porządku oh tak to właśnie właściwość zmiany nieutwardzony jest.
Nie mam pojęcia.
I tak naprawdę, co to znaczy być programistą.
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.
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.
Teraz mamy ten ogromny ogromny ekosystem do pracy w tak wielu właściwości.
Więc po prostu chcą powtórzyć jest tak dużo tutaj.
Zamierzamy skupić się na ważnych elementów, ale cel jest nie do zapamiętania.
Celem jest nie do opanowania każdą nieruchomość.
Znowu 10 procent co najwyżej jest wszystko, co trzeba być kompetentnym web developer.
OK, więc wróćmy a ja po prostu chce przejść nad tym jeszcze raz.
Podsumujmy czym rozmawialiśmy.
Więc DOM oznacza obiektowego modelu dokumentu.
Jest to interfejs między JavaScript i swojej H.M.S ..
To w jaki sposób możemy wykorzystać naszą JavaScript, aby rzeczy interaktywne.
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.
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ść.
Więc mamy ATAC tu skończyć z obiektu tutaj reprezentujące atec.
A potem możemy skończyć z innego obiektu reprezentującego ten tag H1, które widzimy tutaj.
Wreszcie to się nazywa modelu obiektów dokumentu, ponieważ wszystko, co żyje wewnątrz tego jednego obiektu o nazwie dokumentu.
Jest to węzeł główny, w którym wszystko żyje wewnątrz.
Więc następnym filmie mamy zamiar rozpocząć pisanie kodu.