Informationen zum Dokumentobjektmodell (DOM) im Detail
Wir haben alle von der gehört DOM, oder Dokumentobjektmodell, das wird von Zeit zu Zeit erwähnt, bezogen auf JavaScript. DOM ist ein ziemlich wichtiges Konzept in der Webentwicklung. Ohne das wären wir nicht in der Lage HTML-Seiten dynamisch ändern im Browser.
Lernen und Verstehen der DOM-Ergebnisse auf bessere Weise Zugriff, Änderung und Überwachung verschiedene Elemente einer HTML-Seite. Das Document Object Model kann uns auch helfen Reduzieren Sie unnötige Erhöhungen der Skriptausführungszeit.
Datenstrukturbäume
Bevor wir darüber sprechen, was das DOM ist, wie es entsteht, wie es existiert und was darin passiert, möchte ich, dass Sie über Bäume Bescheid wissen. Nicht die Nadel- und Laubart, sondern die Datenstrukturbaum.
Das Konzept der Datenstrukturen lässt sich viel einfacher verstehen, wenn wir die Definition vereinfachen. Ich würde sagen, eine Datenstruktur ist ungefähr Anordnen Ihrer Daten. Ja, einfach ein altes Arrangement, als würden Sie die Möbel in Ihrem Haus, Bücher in einem Bücherregal oder all die verschiedenen Lebensmittelgruppen, die Sie für eine Mahlzeit auf Ihrem Teller haben, ordnen mach es für dich sinnvoll.
Natürlich gibt es nicht nur eine Datenstruktur, aber da fängt alles an. Diese “Anordnung” ist das Herzstück von allem. Es ist auch im DOM ziemlich wichtig. Aber wir reden noch nicht über DOM, also lass mich dich in Richtung A steuern Datenstruktur, mit der Sie möglicherweise vertraut sind: Arrays.
Arrays und Bäume
Arrays haben Indizes und Länge, Sie können sein mehrdimensional, und haben viele weitere Eigenschaften. So wichtig es ist, diese Dinge über Arrays zu wissen, belästigen wir uns jetzt nicht damit. Für uns ist ein Array ziemlich einfach. Es ist, wenn du Ordne verschiedene Dinge in einer Reihe an.
Wenn wir an Bäume denken, sagen wir, geht es um Dinge untereinander setzen, Angefangen mit nur einer Sache an der Spitze.
Jetzt können Sie die Single-Line-Enten von vorher nehmen, dreh es auf, und sag mir das “jetzt ist jede Ente unter einer anderen Ente”. Ist es dann ein Baum? Es ist.
Je nachdem, was Ihre Daten sind oder wie Sie sie verwenden, werden die obersten Daten in Ihrem Baum (genannt Wurzel) könnte etwas sein von großer Wichtigkeit oder etwas, das nur da ist Andere Elemente darunter einschließen.
In beiden Fällen ist das oberste Element in einer Baumdatenstruktur sehr wichtig. Es bietet einen Platz zum Suchen Sie nach Informationen, die Sie aus dem Baum extrahieren möchten.
Die Bedeutung von DOM
DOM steht für Dokumentobjektmodell. Das Dokument verweist auf ein HTML (XML) -Dokument welches ist als Objekt dargestellt. (In JavaScript kann alles immer nur als Objekt dargestellt werden!)
Das Modell ist vom Browser erstellt Das nimmt ein HTML-Dokument und erstellt ein Objekt, das es repräsentiert. Wir können auf dieses Objekt mit JavaScript zugreifen. Und da wir dieses Objekt verwenden, um das HTML-Dokument zu manipulieren und unsere eigenen Anwendungen zu erstellen, DOM ist im Grunde ein API.
Der DOM-Baum
Im JavaScript-Code lautet das HTML-Dokument als Objekt dargestellt. Alle aus diesem Dokument gelesenen Daten sind auch als Objekte gespeichert, untereinander verschachtelt (denn wie ich schon sagte, in JavaScript kann alles immer nur als Objekte dargestellt werden).
Dies ist im Grunde die physische Anordnung der DOM-Daten im Code: alles ist als Objekte angeordnet. Logisch jedoch, es ist ein baum.
Der DOM-Parser
Jede Browser-Software hat ein Programm namens DOM Parser das ist dafür verantwortlich Analysieren eines HTML-Dokuments in DOM.
Browser lesen eine HTML-Seite und wandeln ihre Daten in Objekte um, die das DOM bilden. Die in diesen JavaScript-DOM-Objekten enthaltenen Informationen sind logisch als Datenstrukturbaum (DOM-Baum) angeordnet.
Analysieren von Daten von HTML in die DOM-Struktur
Nehmen Sie eine einfache HTML-Datei. Es hat die Wurzelelement . Es ist Unterelemente sind und , Jeder hat viele eigene Kindselemente.
Im Wesentlichen also der Browser liest die Daten im HTML-Dokument, etwas Ähnliches:
Und, ordnet sie in einem DOM-Baum an so was:
Die Darstellung jedes HTML-Elements (und seines zugehörigen Inhalts) im DOM-Baum wird als a bezeichnet Knoten. Das Wurzelknoten ist der Knoten von .
Das DOM-Schnittstelle in JavaScript heißt dokumentieren (da es sich um die Darstellung des HTML-Dokuments handelt). Somit greifen wir auf den DOM-Baum eines HTML-Dokuments zu durch die dokumentieren Schnittstelle in JavaScript.
Wir können nicht nur zugreifen, sondern auch das HTML-Dokument bearbeiten durch das DOM. Wir können Elemente zu einer Webseite hinzufügen, entfernen und aktualisieren. Jedes Mal, wenn wir Knoten in der DOM-Struktur ändern oder aktualisieren, ist dies der Fall spiegelt sich auf der Webseite.
Wie werden Knoten entworfen?
Ich habe bereits erwähnt, dass jedes Element aus einem HTML-Dokument besteht als Objekt in JavaScript gespeichert. So können die als Objekt gespeicherten Daten als Baum logisch angeordnet werden?
Die Knoten eines DOM-Baums weisen bestimmte Eigenschaften oder Eigenschaften auf. Fast jeder Knoten in einem Baum hat einen übergeordneten Knoten (der Knoten direkt darüber), Kindknoten (die Knoten darunter) und Geschwister (andere Knoten, die zu demselben übergeordneten Element gehören). Das haben Familie oben, unten und um einen Knoten herum ist das, was ihn als qualifiziert Teil eines Baumes.
Diese Familieninformation von jedem Knoten ist als Eigenschaften in dem Objekt gespeichert, das diesen Knoten darstellt. Zum Beispiel, Kinder ist eine Eigenschaft eines Knotens, der eine Liste der untergeordneten Elemente dieses Knotens enthält, wodurch seine untergeordneten Elemente logisch unter dem Knoten angeordnet werden.
Übertreiben Sie die DOM-Manipulation nicht
So sehr wir das Aktualisieren des DOM als nützlich erachten (um eine Webseite zu ändern), gibt es so etwas wie Es übertreiben.
Angenommen, Sie möchten die Farbe von a aktualisieren Aber wenn Sie wollen Einen Knoten aus einem Baum entfernen oder füge eins hinzu? Der ganze Baum Möglicherweise muss neu angeordnet werden, mit dem Knoten entfernt oder dem Baum hinzugefügt. Dies ist eine kostspielige Arbeit. Es dauert Zeit und eine Browserressource, um diese Aufgabe zu erledigen. Nehmen wir zum Beispiel an, Sie möchten Fügen Sie einer Tabelle fünf zusätzliche Zeilen hinzu. Für jede Zeile, wenn ihre neuen Knoten erstellt und zum DOM hinzugefügt werden, die Baum wird jedes Mal aktualisiert, insgesamt bis zu fünf Updates hinzufügen. Wir können dies vermeiden, indem Sie die Dies geschieht nicht nur beim Entfernen oder Hinzufügen von Elementen, sondern Größe eines Elements ändern kann sich auch auf andere Knoten auswirken, da das Element, dessen Größe geändert wird, möglicherweise andere Elemente in seiner Umgebung benötigt ihre Größe anpassen. Daher müssen die entsprechenden Knoten aller anderen Elemente aktualisiert werden und die HTML-Elemente werden gemäß den neuen Regeln erneut dargestellt. Ebenso, wenn das Layout einer Webseite insgesamt betroffen ist, Ein Teil oder die gesamte Webseite wird möglicherweise erneut gerendert. Dieser Vorgang wird als bezeichnet Reflow. Damit Übermäßiger Reflow vermeiden Stellen Sie sicher, dass Sie das DOM nicht zu sehr ändern. Änderungen am DOM sind nicht das einzige, was Reflow auf einer Webseite verursachen kann. Je nach Browser können auch andere Faktoren dazu beitragen. Die Dinge zusammenpacken, ist das DOM als Baum visualisiert besteht aus allen Elementen eines HTML-Dokuments. Physisch (so physisch alles, was digital werden kann), ist es ein Satz verschachtelter JavaScript-Objekte welche Eigenschaften und Methoden die Informationen enthalten, die dies ermöglichen logisch zu einem Baum zusammenstellen.DocumentFragment Schnittstelle. Betrachten Sie es als eine Box, die könnte halte alle fünf Reihen und dem Baum hinzugefügt werden. So sind die fünf Reihen als ein einziges Datenelement hinzugefügt und nicht eins nach dem anderen, was zu nur einer Aktualisierung im Baum führt.Einpacken
