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
[Dies ist CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
In diesem Video werden wir einen Blick auf das DOM zu nehmen.

5
00:00:10,000 --> 00:00:14,000
Wenn ein Browser eine Webseite herunterlädt, muss es im Speicher repräsentiert irgendwie werden.

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

7
00:00:17,000 --> 00:00:20,000
beschreibt, wie der Browser eine Webseite im Speicher darstellt.

8
00:00:20,000 --> 00:00:24,000
In diesem Video werden wir einen Blick auf das DOM in Zusammenhang mit JavaScript zu nehmen,

9
00:00:24,000 --> 00:00:26,000
aber DOM ist eine Sprache-unabhängige Konzept.

10
00:00:26,000 --> 00:00:30,000
Zum Beispiel hat PHP eigene DOM Umsetzung sowie.

11
00:00:30,000 --> 00:00:32,000
Allerdings wird häufig von DOM JavaScript genutzt

12
00:00:32,000 --> 00:00:36,000
seit JavaScript ermöglicht es uns, die Inhalte einer Webseite on the fly ändern,

13
00:00:36,000 --> 00:00:39,000
DOM und ermöglicht es uns, Teile einer Webseite zugreifen.

14
00:00:39,000 --> 00:00:43,000
Werfen wir einen Blick auf ein Beispiel Webseite.

15
00:00:43,000 --> 00:00:48,000
Okay, jetzt wollen wir mal sehen, wie diese Seite in der DOM vertreten sein.

16
00:00:48,000 --> 00:00:51,000
Und jeder Baum muss eine Root-Knoten an der Spitze haben.

17
00:00:51,000 --> 00:00:54,000
Aus diesem Dokument ist das HTML-Element der Wurzelknoten

18
00:00:54,000 --> 00:00:56,000
denn es ist das erste Element, das erscheint.

19
00:00:56,000 --> 00:01:00,000
Fügen wir eine Root-Knoten zu unserem Baum.

20
00:01:00,000 --> 00:01:03,000
Werfen wir einen Blick auf das HTML-Dokument wieder.

21
00:01:03,000 --> 00:01:09,000
Beachten Sie, dass der Körper Tag innerhalb des HTML-Tags verschachtelt ist.

22
00:01:09,000 --> 00:01:14,000
Dies bedeutet, dass der Körper ein Kind-Element des HTML-Elements ist.

23
00:01:14,000 --> 00:01:17,000
Wir können dies in unserem DOM-Baum darstellen, indem sie Körper ein Blatt

24
00:01:17,000 --> 00:01:20,000
absteigend von HTML.

25
00:01:20,000 --> 00:01:22,000
Lasst uns das tun.

26
00:01:22,000 --> 00:01:24,000
Wir haben Körper unter HTML.

27
00:01:24,000 --> 00:01:28,000
Jetzt können wir sehen, dass Körper hat 2 Kinder der eigenen,

28
00:01:28,000 --> 00:01:31,000
das h1-Element und das ul-Element.

29
00:01:31,000 --> 00:01:34,000
Dies bedeutet, dass wir diese beiden Elemente zu verbinden

30
00:01:34,000 --> 00:01:36,000
auf das body-Element, also lasst uns das tun.

31
00:01:36,000 --> 00:01:40,000
Wir haben eine h1 und ul.

32
00:01:40,000 --> 00:01:43,000
Schließlich hat das ul-Element 3 weitere Kinder,

33
00:01:43,000 --> 00:01:50,000
und dies wird unsere DOM-Baum zu vervollständigen, so fügen wir li, li, li.

34
00:01:50,000 --> 00:01:56,000
Damit ist unsere DOM-Baum, und dies ist, wie der Browser speichert Ihre Internetseite.

35
00:01:56,000 --> 00:02:02,000
Nun lassen Sie uns einen Blick darauf, wie können wir diesen Baum mit Hilfe von JavaScript zu durchqueren.

36
00:02:02,000 --> 00:02:10,000
Wir können auf diesen Baum mit einem speziellen JavaScript Variable namens Dokument.

37
00:02:10,000 --> 00:02:13,000
Eine Eigenschaft dieses Dokuments Objekt

38
00:02:13,000 --> 00:02:16,000
ist der Körper Eigenschaft, und diese Aufgabe stellt

39
00:02:16,000 --> 00:02:19,000
das body-Element in unserem Beispiel die Homepage.

40
00:02:19,000 --> 00:02:23,000
Wollten wir alle Kinder des body-Elements zu erhalten,

41
00:02:23,000 --> 00:02:26,000
die, wenn Sie denken, dass h1 tag und das ul-Tag,

42
00:02:26,000 --> 00:02:37,000
können wir sagen, document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
Und das wird uns wieder eine Reihe, die sowohl das h1-Element

44
00:02:41,000 --> 00:02:46,000
und das ul-Element, da sie sowohl die direkten Kinder des Körpers sind.

45
00:02:46,000 --> 00:02:50,000
Wenn wir wollten, um eine Variable, die den ul-Element erstellen

46
00:02:50,000 --> 00:02:57,000
können wir sagen, VRR ul = dann dieser Code hier oben,

47
00:02:57,000 --> 00:03:00,000
und jetzt, weil childNodes ist einfach ein Array

48
00:03:00,000 --> 00:03:07,000
wir können es mit Index in [1], um das zweite Element des Arrays zu erhalten.

49
00:03:07,000 --> 00:03:13,000
Mit dieser neuen ul Objekt können wir auf verschiedene Eigenschaften des Elements wie seine ID.

50
00:03:13,000 --> 00:03:17,000
Wenn wir sagen, ul.id das wird gleich der String-Liste

51
00:03:17,000 --> 00:03:20,000
denn das ist, was wir in unserem HTML-Seite haben.

52
00:03:20,000 --> 00:03:24,000
Wir können auch die tagName, was in diesem Fall sein wird,

53
00:03:24,000 --> 00:03:32,000
Welche Art von Element ist, in diesem Fall ein Ul.

54
00:03:32,000 --> 00:03:36,000
Wir können auch die Eltern oder den Knoten darüber, was in diesem Fall

55
00:03:36,000 --> 00:03:38,000
wird der Körper Element sein.

56
00:03:38,000 --> 00:03:43,000
Wenn wir sagen. ParentNode, die gehen, um die gleichen wie document.body BE.

57
00:03:43,000 --> 00:03:46,000
Natürlich hat diese ul Kinder der eigenen,

58
00:03:46,000 --> 00:03:50,000
so können wir immer noch sagen. childNodes auf dieses Element,

59
00:03:50,000 --> 00:03:55,000
und dieses Array sollten nun Länge 3, weil es 3 Einträge in unserer Liste sind.

60
00:03:55,000 --> 00:04:02,000
Schließlich ist vielleicht das nützlichste Eigenschaft sein wird. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
und dies wird der tatsächliche Inhalt der Liste sein, die in unserem Beispiel-Seite

62
00:04:06,000 --> 00:04:08,000
waren diese 3 li-Tags.

63
00:04:08,000 --> 00:04:11,000
Natürlich, wenn wir ein großes Dokument haben, den Zugriff auf Elemente

64
00:04:11,000 --> 00:04:14,000
auf diese Weise wird wirklich umständlich, da

65
00:04:14,000 --> 00:04:17,000
schließlich müssen wir Dinge wie document.body.childNodes sagen

66
00:04:17,000 --> 00:04:21,000
Halterung etwas. childNodes Halterung etwas anderes,

67
00:04:21,000 --> 00:04:23,000
und es geht um wirklich umständlich.

68
00:04:23,000 --> 00:04:27,000
Stattdessen, was wir wirklich tun möchte, ist in der Lage sein, um das Dokument abfragen,

69
00:04:27,000 --> 00:04:30,000
so genau wie wir nach Dingen über das Internet mit Hilfe von Schlüsselwörtern

70
00:04:30,000 --> 00:04:33,000
wir wirklich brauchen, einen Weg zu suchen, um dieses Dokument kurz und bündig

71
00:04:33,000 --> 00:04:37,000
wieder nur die Elemente, die wir kümmern uns um ohne Verfahrbewegung

72
00:04:37,000 --> 00:04:39,000
der ganze Baum von oben nach unten.

73
00:04:39,000 --> 00:04:42,000
Glücklicherweise können moderne Browser uns, dies zu tun

74
00:04:42,000 --> 00:04:47,000
mit einer speziellen Funktion aufgerufen querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
und diese Funktion nimmt ein einzelnes Argument

76
00:04:49,000 --> 00:04:53,000
das ist ein CSS-Selektor, und es wird zu uns zurückkehren

77
00:04:53,000 --> 00:04:56,000
all der Elemente, die die Wähler entsprechen.

78
00:04:56,000 --> 00:04:59,000
Das heißt, Sie brauchen nicht eine ganz neue Syntax für die Abfrage des DOM zu lernen.

79
00:04:59,000 --> 00:05:02,000
Stattdessen können Sie beantragen die Kenntnisse, die Sie bereits wissen,

80
00:05:02,000 --> 00:05:04,000
über CSS-Selektoren.

81
00:05:04,000 --> 00:05:07,000
Werfen wir einen Blick auf einige Beispiele für die Abfrage des Dokuments.

82
00:05:07,000 --> 00:05:13,000
Wenn wir sagen, querySelectorAll und geben sie diese Zeichenfolge # foo

83
00:05:13,000 --> 00:05:18,000
das wird uns wieder das Element mit der ID foo.

84
00:05:18,000 --> 00:05:23,000
Man kann auch sagen document.getElementById

85
00:05:23,000 --> 00:05:28,000
und übergeben Sie den String foo ohne diesen Hashtag.

86
00:05:28,000 --> 00:05:31,000
Du wirst wieder exakt das gleiche Objekt.

87
00:05:31,000 --> 00:05:37,000
Wenn wir stattdessen übergeben Sie die Zeichenfolge. Bar zu document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
wir gehen, um wieder alle Elemente mit der Klasse bar.

89
00:05:42,000 --> 00:05:45,000
Wir können auch kombinieren CSS-Selektoren.

90
00:05:45,000 --> 00:05:51,000
Gehen wir in der Zeichenfolge # foo img

91
00:05:51,000 --> 00:05:54,000
das wird uns zurück geben alle der Bildelemente

92
00:05:54,000 --> 00:05:58,000
das sind Kinder das Element mit der ID foo.

93
00:05:58,000 --> 00:06:03,000
Wie Sie sehen können, durch die Kombination von Selektoren haben wir einige wirklich leistungsstarken Suchfunktionen.

94
00:06:03,000 --> 00:06:06,000
Aber unter der Haube ist der DOM wirklich nur ein Baum,

95
00:06:06,000 --> 00:06:10,000
und diese Selektoren erlauben uns, abstrakt, dass sich zu einem gewissen Grad

96
00:06:10,000 --> 00:06:14,000
weil wir nicht immer über die gesamte Struktur des DOM-Baum kümmern.

97
00:06:14,000 --> 00:06:18,000
Das war eine schnelle Übersicht über die DOM, und danke für Ihre Teilnahme.

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