[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]