Das Document Object Model (DOM) in Details verstehen

Wir haben alle von dem DOM oder Document Object Model gehört, das von Zeit zu Zeit in Bezug auf JavaScript erwähnt wird. DOM ist ein ziemlich wichtiges Konzept in der Web-Entwicklung. Ohne sie wären wir nicht in der Lage, HTML-Seiten im Browser dynamisch zu ändern .

Das Erlernen und Verstehen des DOM führt zu besseren Möglichkeiten, auf verschiedene Elemente einer HTML-Seite zuzugreifen, sie zu ändern und zu überwachen . Das Document Object Model kann uns auch helfen, unnötige Steigerungen der Script-Ausführungszeit zu reduzieren .

Datenstrukturbäume

Bevor ich darüber spreche, was das DOM ist, wie es entsteht, wie es existiert und was darin passiert, möchte ich, dass du etwas über Bäume weißt. Nicht die Nadel- und Laubbaumart, sondern der Datenstrukturbaum .

Es ist viel einfacher, das Konzept der Datenstrukturen zu verstehen, wenn wir seine Definition vereinfachen. Ich würde sagen, in einer Datenstruktur geht es um die Anordnung Ihrer Daten . Ja, einfach nur alte Anordnung, wie Sie die Möbel in Ihrem Haus oder Bücher in einem Bücherregal oder alle verschiedenen Lebensmittelgruppen, die Sie für eine Mahlzeit auf Ihrem Teller haben, um es für Sie sinnvoll zu gestalten .

Natürlich ist das nicht alles, was es in einer Datenstruktur gibt, aber das ist so ziemlich alles, wo alles anfängt. Diese "Anordnung" ist das Herzstück von allem. Das ist auch im DOM ziemlich wichtig. Aber wir sprechen noch nicht über DOM, also lassen Sie mich zu einer Datenstruktur gehen, die Ihnen vielleicht vertraut ist: Arrays .

Arrays und Bäume

Arrays haben Indizes und Länge, sie können mehrdimensional sein und viele weitere Eigenschaften haben. So wichtig es auch ist, diese Dinge über Arrays zu wissen, machen wir uns jetzt damit nicht zu schaffen. Für uns ist ein Array ziemlich einfach. Es ist, wenn Sie verschiedene Dinge in einer Linie arrangieren .

Wenn wir an Bäume denken, sagen wir mal, es geht darum , Dinge unter einander zu setzen, beginnend mit nur einer Sache an der Spitze.

Jetzt könntest du die Einlinien-Enten von früher nehmen, sie aufrichten und mir sagen, dass "jetzt jede Ente unter einer anderen Ente ist". Ist es dann ein Baum? Es ist.

Abhängig davon, was Ihre Daten sind oder wie Sie sie verwenden werden, sind die obersten Daten in Ihrem Baum ( Wurzel genannt ) möglicherweise von großer Wichtigkeit oder etwas, das nur dazu da ist, andere Elemente darunter zu umschließen .

In jedem Fall spielt das oberste Element in einer Baumdatenstruktur eine wichtige Rolle. Es bietet die Möglichkeit, nach Informationen zu suchen, die wir aus dem Baum extrahieren möchten .

Die Bedeutung von DOM

DOM steht für Document Object Model . Das Dokument verweist auf ein HTML (XML) -Dokument, das als Objekt dargestellt wird . (In JavaScript kann alles immer nur als Objekt dargestellt werden!)

Das Modell wird vom Browser erstellt, der ein HTML-Dokument erstellt und ein Objekt erstellt, das es darstellt. 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, ist DOM im Grunde eine API .

Der DOM-Baum

In JavaScript-Code wird das HTML-Dokument als Objekt dargestellt . Alle Daten, die aus diesem Dokument gelesen werden, werden auch als Objekte gespeichert, die ineinander verschachtelt sind (denn wie gesagt, in JavaScript kann alles immer nur als Objekte dargestellt werden).

Also, das ist im Grunde die physikalische Anordnung von DOM-Daten im Code: alles ist als Objekte angeordnet . Logischerweise ist es jedoch ein Baum .

Der DOM-Parser

Jede Browser-Software hat ein Programm namens DOM Parser, das für das Parsen eines HTML-Dokuments in DOM verantwortlich ist .

Browser lesen eine HTML-Seite und wandeln ihre Daten in Objekte um, aus denen das DOM besteht. Die Informationen, die in diesen JavaScript-DOM-Objekten vorhanden sind, sind logisch als ein Datenstrukturbaum, der als DOM-Baum bekannt ist, angeordnet.

Analysieren von Daten aus HTML in die DOM-Struktur

Nimm eine einfache HTML-Datei. Es hat das Wurzelelement . Seine Unterelemente sind und Jedes hat viele eigene Kinderelemente.

Im Wesentlichen liest der Browser die Daten im HTML-Dokument ähnlich wie

Und arrangiert sie in einem DOM-Baum wie folgt:

Die Darstellung jedes HTML-Elements (und seines zugehörigen Inhalts) in der DOM-Struktur wird als Knoten bezeichnet . Der Wurzelknoten ist der Knoten von .

Die DOM-Schnittstelle in JavaScript heißt document (da es sich um die Darstellung des HTML-Dokuments handelt). So greifen wir über die document in JavaScript auf den DOM-Baum eines HTML-Dokuments zu.

Wir können nicht nur auf das HTML-Dokument zugreifen, sondern es auch über das DOM manipulieren . Wir können Elemente zu einer Webseite hinzufügen, entfernen und aktualisieren. Jedes Mal, wenn wir Knoten in der DOM-Struktur ändern oder aktualisieren, spiegelt sich dies auf der Webseite wider .

Wie Knoten entworfen werden

Ich habe bereits erwähnt, dass alle Daten eines HTML-Dokuments als Objekt in JavaScript gespeichert werden . Wie können also die als Objekt gespeicherten Daten logisch als Baum angeordnet werden?

Die Knoten eines DOM-Baums haben bestimmte Eigenschaften oder Eigenschaften. Fast jeder Knoten in einem Baum hat einen Elternknoten (den Knoten direkt darüber), Kindknoten (die Knoten darunter) und Geschwister (andere Knoten, die zum selben Elternteil gehören). Wenn diese Familie über, unter und um einen Knoten herum angeordnet ist, qualifiziert sie sich als Teil eines Baumes .

Diese Familieninformationen jedes Knotens werden als Eigenschaften in dem Objekt gespeichert, das diesen Knoten darstellt . Beispielsweise ist children eine Eigenschaft eines Knotens, der eine Liste der untergeordneten Elemente dieses Knotens enthält, wodurch seine untergeordneten Elemente logisch unter dem Knoten angeordnet werden.

Vermeiden Sie übertriebene DOM-Manipulationen

So sehr wir das Aktualisieren des DOM nützlich finden (um eine Webseite zu modifizieren), gibt es so etwas wie eine Übertreibung .

Angenommen, Sie möchten die Farbe von a aktualisieren