1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Tommy MacWilliams] [Harvard University]

3
00:00:04,000 --> 00:00:07,000
[To jest CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
W tym filmie mamy zamiar spojrzeć na DOM.

5
00:00:10,000 --> 00:00:14,000
Gdy przeglądarka pobiera stronę, musi być reprezentowana w pamięci jakoś.

6
00:00:14,000 --> 00:00:17,000
Document Object Model, lub DOM,

7
00:00:17,000 --> 00:00:20,000
opisuje, jak przeglądarka reprezentuje stronę w pamięci.

8
00:00:20,000 --> 00:00:24,000
W tym filmie, będziemy spojrzeć na DOM w kontekście JavaScript,

9
00:00:24,000 --> 00:00:26,000
ale DOM jest niezależny od języka pojęcie.

10
00:00:26,000 --> 00:00:30,000
Na przykład, PHP ma własną implementację DOM również.

11
00:00:30,000 --> 00:00:32,000
Jednak DOM jest często wykorzystywana przez JavaScript

12
00:00:32,000 --> 00:00:36,000
od JavaScript pozwala nam zmienić zawartość strony internetowej na bieżąco,

13
00:00:36,000 --> 00:00:39,000
i DOM pozwala nam na dostęp do części strony internetowej.

14
00:00:39,000 --> 00:00:43,000
Rzućmy okiem na przykład na stronie internetowej.

15
00:00:43,000 --> 00:00:48,000
Okay, teraz zobaczymy, jak to strona będzie reprezentowana w DOM.

16
00:00:48,000 --> 00:00:51,000
I każde drzewo musi mieć węzła głównego na górze.

17
00:00:51,000 --> 00:00:54,000
W tym dokumencie, jest elementem HTML węzła głównego

18
00:00:54,000 --> 00:00:56,000
ponieważ jest to pierwszy element, który pojawia.

19
00:00:56,000 --> 00:01:00,000
Dodajmy węzeł główny w naszym drzewie.

20
00:01:00,000 --> 00:01:03,000
Rzućmy okiem na dokument HTML ponownie.

21
00:01:03,000 --> 00:01:09,000
Zauważ, że tag body jest zagnieżdżona wewnątrz tagu HTML.

22
00:01:09,000 --> 00:01:14,000
Oznacza to, że element body jest dzieckiem elementu HTML.

23
00:01:14,000 --> 00:01:17,000
Możemy reprezentować to w naszym drzewa DOM poprzez ciało leaf

24
00:01:17,000 --> 00:01:20,000
opadające z HTML.

25
00:01:20,000 --> 00:01:22,000
Zróbmy to.

26
00:01:22,000 --> 00:01:24,000
Mamy ciało pod HTML.

27
00:01:24,000 --> 00:01:28,000
Teraz widzimy, że ciało ma 2 dzieci własnych,

28
00:01:28,000 --> 00:01:31,000
element h1 i ul elementem.

29
00:01:31,000 --> 00:01:34,000
Oznacza to, że można połączyć oba te elementy

30
00:01:34,000 --> 00:01:36,000
do elementu body, więc zróbmy to.

31
00:01:36,000 --> 00:01:40,000
Mamy h1 i ul.

32
00:01:40,000 --> 00:01:43,000
Wreszcie, ul element ma 3 więcej dzieci,

33
00:01:43,000 --> 00:01:50,000
i będzie to w naszym drzewa DOM, więc dodajmy li, li, li.

34
00:01:50,000 --> 00:01:56,000
To kończy naszą DOM drzewa, i to jest jak przeglądarka przechowuje swoje strony.

35
00:01:56,000 --> 00:02:02,000
Teraz rzućmy okiem na to, jak możemy przechodzić tego drzewa przy użyciu JavaScript.

36
00:02:02,000 --> 00:02:10,000
Możemy uzyskać dostęp do tego drzewa za pomocą specjalnego zmienną JavaScript o nazwie dokumentu.

37
00:02:10,000 --> 00:02:13,000
Jedną z właściwości tego obiektu dokumentu

38
00:02:13,000 --> 00:02:16,000
jest własnością ciała, i ten obiekt reprezentuje

39
00:02:16,000 --> 00:02:19,000
element body w naszej stronie przykład.

40
00:02:19,000 --> 00:02:23,000
Jeśli chcemy, aby wszystkie dzieci z elementu body,

41
00:02:23,000 --> 00:02:26,000
które, jeśli pamiętać, że tag h1 i ul tag,

42
00:02:26,000 --> 00:02:37,000
możemy powiedzieć document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
A to da nam z powrotem tablicę zawierającą zarówno element h1

44
00:02:41,000 --> 00:02:46,000
i ul elementem, ponieważ obaj są bezpośrednimi potomkami ciała.

45
00:02:46,000 --> 00:02:50,000
Jeśli chcemy utworzyć zmienną reprezentującą ul elementu

46
00:02:50,000 --> 00:02:57,000
możemy powiedzieć, VRR ul = to ten kod tutaj,

47
00:02:57,000 --> 00:03:00,000
i teraz, ponieważ childNodes jest po prostu tablica

48
00:03:00,000 --> 00:03:07,000
możemy do niej index z [1], aby uzyskać drugi element tej tablicy.

49
00:03:07,000 --> 00:03:13,000
Z tego nowego obiektu przy ul możemy uzyskać dostęp do różnych właściwości elementu, jak jego ID.

50
00:03:13,000 --> 00:03:17,000
Jeśli mówimy ul.id że będzie równa listy smyczkowy

51
00:03:17,000 --> 00:03:20,000
bo to, co mamy w naszej stronie HTML.

52
00:03:20,000 --> 00:03:24,000
Możemy również uzyskać jego zmiennej, która w tym przypadku będzie

53
00:03:24,000 --> 00:03:32,000
Jaki rodzaj elementu jest to, w tym przypadku, ul.

54
00:03:32,000 --> 00:03:36,000
Możemy również uzyskać jego rodzica lub węzeł nad nim, co w tym przypadku

55
00:03:36,000 --> 00:03:38,000
będzie element body.

56
00:03:38,000 --> 00:03:43,000
Jeśli mówimy. ParentNode, że będzie tak samo jak document.body.

57
00:03:43,000 --> 00:03:46,000
Oczywiście, ul ma własnych dzieci,

58
00:03:46,000 --> 00:03:50,000
więc możemy jeszcze powiedzieć. childNodes na ten element,

59
00:03:50,000 --> 00:03:55,000
i tablica ta powinna mieć długość 3, bo są 3 pozycje w naszej liście.

60
00:03:55,000 --> 00:04:02,000
Wreszcie, być może najbardziej przydatna właściwość będzie. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
i będzie to rzeczywista zawartość listy, które w naszej stronie np.

62
00:04:06,000 --> 00:04:08,000
były te 3 znaczniki li.

63
00:04:08,000 --> 00:04:11,000
Oczywiście, jeśli mamy duży dokument, dostęp do elementów

64
00:04:11,000 --> 00:04:14,000
w ten sposób będzie bardzo uciążliwe, ponieważ

65
00:04:14,000 --> 00:04:17,000
w końcu będziemy musieli mówić takich rzeczy document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
coś wspornik. childNodes coś uchwytu innego,

67
00:04:21,000 --> 00:04:23,000
i to będzie się naprawdę uciążliwe.

68
00:04:23,000 --> 00:04:27,000
Zamiast tego, co naprawdę chcesz zrobić, to być w stanie zbadać dokument,

69
00:04:27,000 --> 00:04:30,000
tak samo jak my szukali rzeczy w internecie za pomocą słów kluczowych

70
00:04:30,000 --> 00:04:33,000
naprawdę musimy w jakiś sposób poszukiwania tego dokumentu do zwięźle

71
00:04:33,000 --> 00:04:37,000
wrócić tylko elementy Dbamy o bez przechodzenia

72
00:04:37,000 --> 00:04:39,000
Cały top drzewo do dołu.

73
00:04:39,000 --> 00:04:42,000
Na szczęście nowoczesne przeglądarki pozwalają na to

74
00:04:42,000 --> 00:04:47,000
specjalną funkcję o nazwie querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
i ta funkcja przyjmuje jeden argument

76
00:04:49,000 --> 00:04:53,000
to jest selektor CSS, i to wróci do nas

77
00:04:53,000 --> 00:04:56,000
wszystkie elementy, które odpowiadają, że selektor.

78
00:04:56,000 --> 00:04:59,000
Oznacza to, że nie trzeba uczyć się całe nowe składni zapytań DOM.

79
00:04:59,000 --> 00:05:02,000
Zamiast tego można zastosować wiedzę już wiesz

80
00:05:02,000 --> 00:05:04,000
o selektorów CSS.

81
00:05:04,000 --> 00:05:07,000
Rzućmy okiem na kilka przykładów zapytań dokument.

82
00:05:07,000 --> 00:05:13,000
Jeśli mówimy querySelectorAll i przekazać mu ten ciąg # foo

83
00:05:13,000 --> 00:05:18,000
że zamierza dać nam z powrotem element z ID foo.

84
00:05:18,000 --> 00:05:23,000
Można również powiedzieć, document.getElementById

85
00:05:23,000 --> 00:05:28,000
i przekazać go ciąg foo bez tego tagiem.

86
00:05:28,000 --> 00:05:31,000
Masz zamiar wrócić dokładnie taki sam obiekt.

87
00:05:31,000 --> 00:05:37,000
Jeśli zamiast mijamy ciąg. Bar do document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
mamy zamiar odzyskać wszystkie elementy z paska klasy.

89
00:05:42,000 --> 00:05:45,000
Możemy również połączyć selektorów CSS.

90
00:05:45,000 --> 00:05:51,000
Jeśli przekazujemy w ciągu # bla img

91
00:05:51,000 --> 00:05:54,000
, że zamierza przywrócić nam wszystkich elementów graficznych

92
00:05:54,000 --> 00:05:58,000
, które są dziećmi elementu z ID foo.

93
00:05:58,000 --> 00:06:03,000
Jak widać, przez selekcjonerów łączących mamy kilka naprawdę potężne możliwości wyszukiwania.

94
00:06:03,000 --> 00:06:06,000
Ale pod maską, DOM jest naprawdę tylko drzewo,

95
00:06:06,000 --> 00:06:10,000
i te przełączniki pozwalają na abstrakcyjne, że daleko do pewnego stopnia

96
00:06:10,000 --> 00:06:14,000
dlatego, że nie zawsze dbają o całej strukturze drzewa DOM.

97
00:06:14,000 --> 00:06:18,000
To był krótki przegląd DOM, i dzięki za przyłączenie się do nas.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]