[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Dies ist CS50.] [CS50.TV]
In diesem Video werden wir einen Blick auf das DOM zu nehmen.
Wenn ein Browser eine Webseite herunterlädt, muss es im Speicher repräsentiert irgendwie werden.
Das Document Object Model, DOM oder,
beschreibt, wie der Browser eine Webseite im Speicher darstellt.
In diesem Video werden wir einen Blick auf das DOM in Zusammenhang mit JavaScript zu nehmen,
aber DOM ist eine Sprache-unabhängige Konzept.
Zum Beispiel hat PHP eigene DOM Umsetzung sowie.
Allerdings wird häufig von DOM JavaScript genutzt
seit JavaScript ermöglicht es uns, die Inhalte einer Webseite on the fly ändern,
DOM und ermöglicht es uns, Teile einer Webseite zugreifen.
Werfen wir einen Blick auf ein Beispiel Webseite.
Okay, jetzt wollen wir mal sehen, wie diese Seite in der DOM vertreten sein.
Und jeder Baum muss eine Root-Knoten an der Spitze haben.
Aus diesem Dokument ist das HTML-Element der Wurzelknoten
denn es ist das erste Element, das erscheint.
Fügen wir eine Root-Knoten zu unserem Baum.
Werfen wir einen Blick auf das HTML-Dokument wieder.
Beachten Sie, dass der Körper Tag innerhalb des HTML-Tags verschachtelt ist.
Dies bedeutet, dass der Körper ein Kind-Element des HTML-Elements ist.
Wir können dies in unserem DOM-Baum darstellen, indem sie Körper ein Blatt
absteigend von HTML.
Lasst uns das tun.
Wir haben Körper unter HTML.
Jetzt können wir sehen, dass Körper hat 2 Kinder der eigenen,
das h1-Element und das ul-Element.
Dies bedeutet, dass wir diese beiden Elemente zu verbinden
auf das body-Element, also lasst uns das tun.
Wir haben eine h1 und ul.
Schließlich hat das ul-Element 3 weitere Kinder,
und dies wird unsere DOM-Baum zu vervollständigen, so fügen wir li, li, li.
Damit ist unsere DOM-Baum, und dies ist, wie der Browser speichert Ihre Internetseite.
Nun lassen Sie uns einen Blick darauf, wie können wir diesen Baum mit Hilfe von JavaScript zu durchqueren.
Wir können auf diesen Baum mit einem speziellen JavaScript Variable namens Dokument.
Eine Eigenschaft dieses Dokuments Objekt
ist der Körper Eigenschaft, und diese Aufgabe stellt
das body-Element in unserem Beispiel die Homepage.
Wollten wir alle Kinder des body-Elements zu erhalten,
die, wenn Sie denken, dass h1 tag und das ul-Tag,
können wir sagen, document.body.childNodes.
Und das wird uns wieder eine Reihe, die sowohl das h1-Element
und das ul-Element, da sie sowohl die direkten Kinder des Körpers sind.
Wenn wir wollten, um eine Variable, die den ul-Element erstellen
können wir sagen, VRR ul = dann dieser Code hier oben,
und jetzt, weil childNodes ist einfach ein Array
wir können es mit Index in [1], um das zweite Element des Arrays zu erhalten.
Mit dieser neuen ul Objekt können wir auf verschiedene Eigenschaften des Elements wie seine ID.
Wenn wir sagen, ul.id das wird gleich der String-Liste
denn das ist, was wir in unserem HTML-Seite haben.
Wir können auch die tagName, was in diesem Fall sein wird,
Welche Art von Element ist, in diesem Fall ein Ul.
Wir können auch die Eltern oder den Knoten darüber, was in diesem Fall
wird der Körper Element sein.
Wenn wir sagen. ParentNode, die gehen, um die gleichen wie document.body BE.
Natürlich hat diese ul Kinder der eigenen,
so können wir immer noch sagen. childNodes auf dieses Element,
und dieses Array sollten nun Länge 3, weil es 3 Einträge in unserer Liste sind.
Schließlich ist vielleicht das nützlichste Eigenschaft sein wird. InnerHTML,
und dies wird der tatsächliche Inhalt der Liste sein, die in unserem Beispiel-Seite
waren diese 3 li-Tags.
Natürlich, wenn wir ein großes Dokument haben, den Zugriff auf Elemente
auf diese Weise wird wirklich umständlich, da
schließlich müssen wir Dinge wie document.body.childNodes sagen
Halterung etwas. childNodes Halterung etwas anderes,
und es geht um wirklich umständlich.
Stattdessen, was wir wirklich tun möchte, ist in der Lage sein, um das Dokument abfragen,
so genau wie wir nach Dingen über das Internet mit Hilfe von Schlüsselwörtern
wir wirklich brauchen, einen Weg zu suchen, um dieses Dokument kurz und bündig
wieder nur die Elemente, die wir kümmern uns um ohne Verfahrbewegung
der ganze Baum von oben nach unten.
Glücklicherweise können moderne Browser uns, dies zu tun
mit einer speziellen Funktion aufgerufen querySelectorAll,
und diese Funktion nimmt ein einzelnes Argument
das ist ein CSS-Selektor, und es wird zu uns zurückkehren
all der Elemente, die die Wähler entsprechen.
Das heißt, Sie brauchen nicht eine ganz neue Syntax für die Abfrage des DOM zu lernen.
Stattdessen können Sie beantragen die Kenntnisse, die Sie bereits wissen,
über CSS-Selektoren.
Werfen wir einen Blick auf einige Beispiele für die Abfrage des Dokuments.
Wenn wir sagen, querySelectorAll und geben sie diese Zeichenfolge # foo
das wird uns wieder das Element mit der ID foo.
Man kann auch sagen document.getElementById
und übergeben Sie den String foo ohne diesen Hashtag.
Du wirst wieder exakt das gleiche Objekt.
Wenn wir stattdessen übergeben Sie die Zeichenfolge. Bar zu document.querySelectorAll
wir gehen, um wieder alle Elemente mit der Klasse bar.
Wir können auch kombinieren CSS-Selektoren.
Gehen wir in der Zeichenfolge # foo img
das wird uns zurück geben alle der Bildelemente
das sind Kinder das Element mit der ID foo.
Wie Sie sehen können, durch die Kombination von Selektoren haben wir einige wirklich leistungsstarken Suchfunktionen.
Aber unter der Haube ist der DOM wirklich nur ein Baum,
und diese Selektoren erlauben uns, abstrakt, dass sich zu einem gewissen Grad
weil wir nicht immer über die gesamte Struktur des DOM-Baum kümmern.
Das war eine schnelle Übersicht über die DOM, und danke für Ihre Teilnahme.
[CS50.TV]