"The DOM" ist ein Begriff, der im Front-End-Webdesign und in der Front-End-Entwicklung häufig verwendet wird. Es steht für "Document Object Model" und ist ein wesentlicher Bestandteil von Websites.
So wichtig das DOM auch ist, viele Menschen verstehen es nicht. Tatsächlich können Sie Websites jahrelang programmieren, ohne viel darüber zu lernen. Mit fortschreitender Front-End-Technologie wird das Verständnis des DOM jedoch immer wichtiger.
Den DOM-Vertrag verstehen
In der objektorientierten Programmierung gibt es ein Konstrukt, das als Schnittstelle bezeichnet wird. Eine Schnittstelle macht nichts alleine. Stattdessen wird ein Vertrag erstellt. Es heißt, dass alles mit allem anderen interagieren kann, solange es den Regeln des Schnittstellenvertrags folgt.
Mit einer Schnittstelle kann jeder Teil eines Programms auf kontrollierte und vorhersehbare Weise mit jedem anderen Teil des Programms interagieren. Die Schnittstelle ermöglicht es auch, dass ein Teil eines Programms mit einem anderen Teil zusammenarbeitet, auch wenn er nichts über den Teil des Programms auf der anderen Seite der Schnittstelle weiß.
Eine Schnittstelle ist wie eine Steckdose in Ihrer Wand. Ihr Gerät muss nicht wissen, woher der Strom kommt, solange die Spannung korrekt ist. Der Transformator an der Ecke muss nicht wissen, was er mit Strom versorgt. Es muss nur Strom mit der richtigen Spannung an Ihr Haus senden.
Das DOM ist eine Schnittstellenschicht zwischen der Webseite und dem Code, der sie erstellt und ändert. Wenn Sie eine Website besuchen, sehen Sie, wie der Browser das DOM dieser Website rendert. Wenn Sie HTML schreiben, programmieren Sie tatsächlich mit der DOM-API (Programmierschnittstelle).
Der DOM-Standard wird von einer Organisation namens aufgerufen das World Wide Web Consortiumoder W3C. Sie haben geschaffen Sehr detaillierte Dokumentation zur Definition des DOM Standard.
An diesem Punkt denken Sie vielleicht, dass sie keine sehr gute Arbeit leisten. Immerhin gibt es so viele Probleme, die durch browserübergreifende Kompatibilitätsprobleme verursacht werden.
Das Problem liegt nicht beim Standard. Es ist mit den Browsern selbst. Viele Browser haben ihrer DOM-Implementierung Funktionen hinzugefügt, die nicht den W3C-Standards entsprechen. Manchmal wird diese Funktionalität populär und wird in den DOM-Standard implementiert, wodurch andere Browser zum Aufholen gezwungen werden.
Ein weiteres Problem besteht darin, dass einige Benutzer immer noch ältere Versionen von Browsern verwenden, in denen nicht der neueste DOM-Standard integriert ist. Und manchmal implementieren Browser den Standard nicht richtig.
Wie das DOM aufgebaut ist
Sie können sich das DOM wie einen Baum vorstellen. Das Element ist der Stamm, und alle Elemente darin sind Zweige. Wenn Sie HTML-Elemente in einem übergeordneten Element verschachteln, erstellen Sie tatsächlich Zweige aus diesem Zweig. Der richtige Begriff für jeden Zweig lautet "Knoten".
Die Baumstruktur erstellt wie ein Stammbaum logische Beziehungen zwischen Knoten. Jeder Knoten kann einen Elternteil und Vorfahren haben, von denen er verzweigt. Sie können Geschwister haben. Und die Knoten können Kinder und Nachkommen haben. In diesen Begriffen zu denken hilft sehr, wenn JavaScript und CSS für die Interaktion mit dem DOM verwendet werden.
Wie HTML mit dem DOM interagiert
Das DOM wird definiert, indem ein Dokumentobjekt mit der Dokumentschnittstelle erstellt wird. Ihr HTML-Code ist der direkteste Weg, um ein Dokument zu erstellen. HTML bietet Ihnen eine einfache Möglichkeit, das Dokument zu definieren, ohne herkömmliche Programmierung durchführen zu müssen.
Wenn Sie gerade erst mit HTML beginnen, finden Sie hier fünf Tipps, um sich damit vertraut zu machen.
HTML ist das Rückgrat jeder Webseite. Wenn Sie ein Anfänger sind, lassen Sie sich von uns durch die grundlegenden Schritte zum Verständnis von HTML führen.
HTML ist einfacher und fehlerverzeihender als herkömmliche Programmiersprachen. Dies erleichtert Anfängern von Webdesignern die Interaktion mit dem DOM.
Wie CSS mit dem DOM interagiert
Sobald Ihr HTML das DOM-Dokument strukturiert hat, kann CSS dieses Dokument formatieren. Dazu muss es in der Lage sein, die Elemente zu finden, die Sie stylen möchten. Dies geschieht auf verschiedene Arten.
Sie können auf Dokumentknoten zugreifen, indem Sie Elemente nach Namen referenzieren, z und. CSS kann auch direkt durch Referenzieren auf die Elemente zugreifen Klasse und Ich würde Namen. Das Klassen-Styling wird auf mehrere Elemente angewendet, sodass Sie alle gleichzeitig stylen können. Umgekehrt werden beim ID-Stil Änderungen nur auf ein einzelnes Element angewendet.
Sie können auch mit CSS auf die Stammbaumstruktur zugreifen und den Zugriff optimieren, um mehr Kontrolle zu erhalten. Mit CSS-Selektoren können Sie mehrere Elemente auswählen und eine Reihe von Tricks finden, um sie zu finden. Sie können nach Kindern anhand ihrer Abstammung, Klassenkombinationen und vielem mehr suchen.
Wie JavaScript mit dem DOM interagiert
JavaScript hat die größte Kontrolle über das Dokument, da JavaScript eine tatsächliche Programmiersprache mit Objekten, Flusskontrolle, Variablen usw. ist. Das DOM bietet mehrere Schnittstellen, mit denen JavaScript das Dokument, die Elemente und andere Knoten bearbeiten kann.
Verbunden: Was ist JavaScript?
JavaScript kann Knoten hinzufügen und entfernen sowie ihren Stil ändern. Und JavaScript kann nach Ereignissen im Dokument suchen, z. B. mit der Maus über ein Element fahren, klicken und Tasten drücken.
JavaScript kann den Dokumentbaum auf ähnliche Weise wie CSS durchsuchen und navigieren. Es ist in der Lage, Elemente nach ID und Klasse zu finden. Und es kann Listen von untergeordneten Elementen als Arrays abrufen.
Die Zukunft der Webentwicklung und des DOM
Das Internet hat sich seit den Anfängen stark verändert. In der Anfangszeit wurde JavaScript hauptsächlich für Spezialeffekte und einfache Datenanzeigen verwendet. Die meisten Websites waren nicht viel mehr als digitale Broschüren. AJAX hat das alles geändert.
Mit AJAX können Websites die von einem Server angezeigten Daten im laufenden Betrieb aktualisieren, ohne die Seite neu laden zu müssen. Vor AJAX konnte jede Änderung an Daten nur angezeigt werden, wenn die Seite neu geladen oder der Benutzer zu einer anderen Seite navigiert wurde.
Nach AJAX wurden Web-Apps immer beliebter. Das Internet ist nicht länger eine Sammlung einfacher statischer Websites und einiger hochfunktionaler Apps wie eBay. Jetzt ist das Internet fast ein zweites Betriebssystem voller hochfunktioneller Apps.
Wenn die Erwartungen der Benutzer steigen, muss die Technologie Schritt halten. JavaScript ist nicht die mächtigste oder schnellste Sprache. Es leidet auch an einer Handvoll Problemen wie Gleitkommazahlenfehlern, die es für Entwickler weniger wünschenswert machen. Hier kommt WebAssembly ins Spiel.
WebAssembly bietet dem Browser viele Vorteile des nativen Codes, einschließlich einer verbesserten Geschwindigkeit und eines besseren Hardwarezugriffs. Damit können Programmierer andere Sprachen verwenden, um Websites wie C ++ und Rust zu erstellen.
Aber auch mit den enormen Verbesserungen, die WebAssembly bringen wird, bleibt das DOM bestehen und bietet eine konsistente Schnittstelle zwischen dem Code und den im Browser angezeigten Informationen.
Reduzieren Sie die Belastung der Augen und verlängern Sie die Akkulaufzeit, indem Sie Microsoft Outlook in den Dunkelmodus schalten.
- Programmierung
- HTML
- CSS
- Dokumentobjektmodell
Lee ist ein Vollzeitnomade und ein Polymath mit vielen Leidenschaften und Interessen. Einige dieser Leidenschaften drehen sich um Produktivität, persönliche Entwicklung und Schreiben.
Abonniere unseren Newsletter
Melden Sie sich für unseren Newsletter an, um technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote zu erhalten!
Noch ein Schritt…!
Bitte bestätigen Sie Ihre E-Mail-Adresse in der E-Mail, die wir Ihnen gerade gesendet haben.