[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [To jest CS50.] [CS50.TV] W tym filmie mamy zamiar spojrzeć na DOM. Gdy przeglądarka pobiera stronę, musi być reprezentowana w pamięci jakoś. Document Object Model, lub DOM, opisuje, jak przeglądarka reprezentuje stronę w pamięci. W tym filmie, będziemy spojrzeć na DOM w kontekście JavaScript, ale DOM jest niezależny od języka pojęcie. Na przykład, PHP ma własną implementację DOM również. Jednak DOM jest często wykorzystywana przez JavaScript od JavaScript pozwala nam zmienić zawartość strony internetowej na bieżąco, i DOM pozwala nam na dostęp do części strony internetowej. Rzućmy okiem na przykład na stronie internetowej. Okay, teraz zobaczymy, jak to strona będzie reprezentowana w DOM. I każde drzewo musi mieć węzła głównego na górze. W tym dokumencie, jest elementem HTML węzła głównego ponieważ jest to pierwszy element, który pojawia. Dodajmy węzeł główny w naszym drzewie. Rzućmy okiem na dokument HTML ponownie. Zauważ, że tag body jest zagnieżdżona wewnątrz tagu HTML. Oznacza to, że element body jest dzieckiem elementu HTML. Możemy reprezentować to w naszym drzewa DOM poprzez ciało leaf opadające z HTML. Zróbmy to. Mamy ciało pod HTML. Teraz widzimy, że ciało ma 2 dzieci własnych, element h1 i ul elementem. Oznacza to, że można połączyć oba te elementy do elementu body, więc zróbmy to. Mamy h1 i ul. Wreszcie, ul element ma 3 więcej dzieci, i będzie to w naszym drzewa DOM, więc dodajmy li, li, li. To kończy naszą DOM drzewa, i to jest jak przeglądarka przechowuje swoje strony. Teraz rzućmy okiem na to, jak możemy przechodzić tego drzewa przy użyciu JavaScript. Możemy uzyskać dostęp do tego drzewa za pomocą specjalnego zmienną JavaScript o nazwie dokumentu. Jedną z właściwości tego obiektu dokumentu jest własnością ciała, i ten obiekt reprezentuje element body w naszej stronie przykład. Jeśli chcemy, aby wszystkie dzieci z elementu body, które, jeśli pamiętać, że tag h1 i ul tag, możemy powiedzieć document.body.childNodes. A to da nam z powrotem tablicę zawierającą zarówno element h1 i ul elementem, ponieważ obaj są bezpośrednimi potomkami ciała. Jeśli chcemy utworzyć zmienną reprezentującą ul elementu możemy powiedzieć, VRR ul = to ten kod tutaj, i teraz, ponieważ childNodes jest po prostu tablica możemy do niej index z [1], aby uzyskać drugi element tej tablicy. Z tego nowego obiektu przy ul możemy uzyskać dostęp do różnych właściwości elementu, jak jego ID. Jeśli mówimy ul.id że będzie równa listy smyczkowy bo to, co mamy w naszej stronie HTML. Możemy również uzyskać jego zmiennej, która w tym przypadku będzie Jaki rodzaj elementu jest to, w tym przypadku, ul. Możemy również uzyskać jego rodzica lub węzeł nad nim, co w tym przypadku będzie element body. Jeśli mówimy. ParentNode, że będzie tak samo jak document.body. Oczywiście, ul ma własnych dzieci, więc możemy jeszcze powiedzieć. childNodes na ten element, i tablica ta powinna mieć długość 3, bo są 3 pozycje w naszej liście. Wreszcie, być może najbardziej przydatna właściwość będzie. InnerHTML, i będzie to rzeczywista zawartość listy, które w naszej stronie np. były te 3 znaczniki li. Oczywiście, jeśli mamy duży dokument, dostęp do elementów w ten sposób będzie bardzo uciążliwe, ponieważ w końcu będziemy musieli mówić takich rzeczy document.body.childNodes coś wspornik. childNodes coś uchwytu innego, i to będzie się naprawdę uciążliwe. Zamiast tego, co naprawdę chcesz zrobić, to być w stanie zbadać dokument, tak samo jak my szukali rzeczy w internecie za pomocą słów kluczowych naprawdę musimy w jakiś sposób poszukiwania tego dokumentu do zwięźle wrócić tylko elementy Dbamy o bez przechodzenia Cały top drzewo do dołu. Na szczęście nowoczesne przeglądarki pozwalają na to specjalną funkcję o nazwie querySelectorAll, i ta funkcja przyjmuje jeden argument to jest selektor CSS, i to wróci do nas wszystkie elementy, które odpowiadają, że selektor. Oznacza to, że nie trzeba uczyć się całe nowe składni zapytań DOM. Zamiast tego można zastosować wiedzę już wiesz o selektorów CSS. Rzućmy okiem na kilka przykładów zapytań dokument. Jeśli mówimy querySelectorAll i przekazać mu ten ciąg # foo że zamierza dać nam z powrotem element z ID foo. Można również powiedzieć, document.getElementById i przekazać go ciąg foo bez tego tagiem. Masz zamiar wrócić dokładnie taki sam obiekt. Jeśli zamiast mijamy ciąg. Bar do document.querySelectorAll mamy zamiar odzyskać wszystkie elementy z paska klasy. Możemy również połączyć selektorów CSS. Jeśli przekazujemy w ciągu # bla img , że zamierza przywrócić nam wszystkich elementów graficznych , które są dziećmi elementu z ID foo. Jak widać, przez selekcjonerów łączących mamy kilka naprawdę potężne możliwości wyszukiwania. Ale pod maską, DOM jest naprawdę tylko drzewo, i te przełączniki pozwalają na abstrakcyjne, że daleko do pewnego stopnia dlatego, że nie zawsze dbają o całej strukturze drzewa DOM. To był krótki przegląd DOM, i dzięki za przyłączenie się do nas. [CS50.TV]