Einführung in das DOM

Einführung

Das * Document Object Model *, normalerweise als * DOM * bezeichnet, ist ein wesentlicher Bestandteil der interaktiven Gestaltung von Websites. Es ist eine Schnittstelle, mit der eine Programmiersprache den Inhalt, die Struktur und den Stil einer Website manipulieren kann. JavaScript ist die clientseitige Skriptsprache, die in einem Internetbrowser eine Verbindung zum DOM herstellt.

Nahezu jedes Mal, wenn eine Website eine Aktion ausführt, z. B. zwischen einer Diashow mit Bildern wechselt, ein Fehler angezeigt wird, wenn ein Benutzer versucht, ein unvollständiges Formular einzureichen, oder wenn ein Navigationsmenü umgeschaltet wird, ist dies das Ergebnis des JavaScript-Zugriffs und der Manipulation des DOM. In diesem Artikel erfahren Sie, was das DOM ist, wie Sie mit dem Objekt "+ document +" arbeiten und wie Sie den Unterschied zwischen HTML-Quellcode und DOM erkennen.

Voraussetzungen

Um das DOM effektiv zu verstehen und wie es mit der Arbeit mit dem Web zusammenhängt, müssen Kenntnisse über HTML und https vorhanden sein : //developer.mozilla.org/en-US/docs/Web/CSS [CSS]. Es ist auch von Vorteil, mit den grundlegenden https://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure-in-javascript[JavaScript-Syntax und -Codestruktur vertraut zu sein.

Was ist das DOM?

Im Grunde besteht eine Website aus einem HTML-Dokument. Der Browser, den Sie zum Anzeigen der Website verwenden, ist ein Programm, das HTML und CSS interpretiert und den Stil, den Inhalt und die Struktur auf der angezeigten Seite wiedergibt.

Zusätzlich zum Parsen des Stils und der Struktur von HTML und CSS erstellt der Browser eine Darstellung des Dokuments, das als Dokumentobjektmodell bezeichnet wird. Dieses * Modell * ermöglicht es JavaScript, auf den Textinhalt und die Elemente der Website * als * Objekte * zuzugreifen.

JavaScript ist eine interaktive Sprache und es ist einfacher, neue Konzepte zu verstehen. Erstellen wir eine sehr einfache Website. Erstellen Sie eine + index.html-Datei und speichern Sie diese in einem neuen Projektverzeichnis.

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Dieser Code ist die vertraute HTML-Quelle eines neuen Website-Skeletts. Es enthält die absolut wichtigsten Aspekte eines Website-Dokuments - einen Doctype und ein HTML-Tag mit den darin eingebetteten Zeichen "+ head" und "+ body".

Für unsere Zwecke verwenden wir den Chrome-Browser, aber Sie können ähnliche Ausgaben von anderen modernen Browsern erhalten. Öffnen Sie in Chrome "+ index.html". Sie sehen eine einfache Website mit der Überschrift "Document Object Model". Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie "Überprüfen". Dies öffnet die Entwicklertools.

Auf der Registerkarte "Elemente" wird das DOM angezeigt.

image: https://assets.digitalocean.com/articles/eng_javascript/dom/the-dom.png [DOM-Beispiel]

In diesem Fall sieht es, wenn es erweitert ist, genauso aus wie der HTML-Quellcode, den wir gerade geschrieben haben - ein Doctype und die wenigen anderen HTML-Tags, die wir hinzugefügt haben. Bewegen Sie den Mauszeiger über jedes Element, um das entsprechende Element auf der gerenderten Website hervorzuheben. Mit kleinen Pfeilen links neben den HTML-Elementen können Sie die Ansicht verschachtelter Elemente umschalten.

Das Dokumentobjekt

Das + document + Objekt ist ein eingebautes Objekt, das viele * Eigenschaften * und * Methoden * hat, mit denen wir auf Websites zugreifen und diese ändern können. Um zu verstehen, wie Sie mit dem DOM arbeiten, müssen Sie wissen, wie Objekte in JavaScript funktionieren. Lesen Sie Understanding Objects in JavaScript, wenn Sie mit dem Konzept von Objekten nicht vertraut sind.

Wechseln Sie in den Entwicklertools auf * index.html * zur Registerkarte Console. Geben Sie "+ document" in die Konsole ein und drücken Sie "+ ENTER". Sie werden sehen, dass die Ausgabe mit der auf der Registerkarte Elements angezeigten identisch ist.

document;

Output#document
<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Das Eingeben von "+ document " und das andere Arbeiten direkt in der Konsole ist etwas, was Sie normalerweise außerhalb des Debuggens nicht tun werden. Es hilft jedoch dabei, das " document +" - Objekt genau zu bestimmen und zu ändern, wie wir weiter unten sehen werden .

Was ist der Unterschied zwischen dem DOM und dem HTML-Quellcode?

Derzeit scheinen in diesem Beispiel HTML-Quellcode und DOM genau dasselbe zu sein. In zwei Fällen unterscheidet sich das vom Browser generierte DOM vom HTML-Quellcode:

Das DOM wird durch clientseitiges JavaScript geändert
Der Browser behebt automatisch Fehler im Quellcode

Lassen Sie uns demonstrieren, wie das DOM durch clientseitiges JavaScript geändert werden kann. Geben Sie Folgendes in die Konsole ein:

document.body;

Die Konsole antwortet mit dieser Ausgabe:

Output<body>
 <h1>Document Object Model</h1>
</body>

+ document ist ein Objekt,` + body + `ist eine Eigenschaft des Objekts, auf das wir mit Punktnotation zugegriffen haben. Wenn Sie "+ document.body " an die Konsole senden, wird das " body +" - Element und alles darin ausgegeben.

In der Konsole können wir einige der Live-Eigenschaften des Objekts "+ body " auf dieser Website ändern. Wir bearbeiten das Attribut " style" und ändern die Hintergrundfarbe in "+ fuchsia". Geben Sie dies in die Konsole ein:

document.body.style.backgroundColor = 'fuchsia';

Nachdem Sie den obigen Code eingegeben und gesendet haben, wird das Live-Update für die Site angezeigt, wenn sich die Hintergrundfarbe ändert.

image: https://assets.digitalocean.com/articles/eng_javascript/dom/modifying-the-dom.png [DOM Live Modification]

Wenn Sie zur Registerkarte "Elemente" wechseln oder "+ document.body" erneut in die Konsole eingeben, werden Sie feststellen, dass sich das DOM geändert hat.

Output<body style="background-color: fuchsia;">
 <h1>Document Object Model</h1>
</body>

Der von uns eingegebene JavaScript-Code, der der Hintergrundfarbe von "+ body " " fuchsia +" zuweist, ist jetzt Teil des DOM.

Klicken Sie jedoch mit der rechten Maustaste auf die Seite und wählen Sie "Seitenquelle anzeigen". Sie werden feststellen, dass die Quelle der Website nicht das neue Stilattribut enthält, das wir über JavaScript hinzugefügt haben. Die Quelle einer Website wird sich nicht ändern und wird auch nicht durch clientseitiges JavaScript beeinflusst. Wenn Sie die Seite aktualisieren, verschwindet der neue Code, den wir in der Konsole hinzugefügt haben.

Die andere Instanz, in der das DOM möglicherweise eine andere Ausgabe als der HTML-Quellcode hat, liegt vor, wenn der Quellcode fehlerhaft ist. Ein häufiges Beispiel hierfür ist das "+ table" -Tag - ein "+ tbody" -Tag ist in einem "+ table " erforderlich, aber Entwickler können es häufig nicht in ihren HTML-Code aufnehmen. Der Browser korrigiert den Fehler automatisch und fügt das ` tbody +` hinzu, wodurch das DOM geändert wird. Das DOM repariert auch Tags, die noch nicht geschlossen wurden.

Fazit

In diesem Tutorial haben wir das DOM definiert, auf das Objekt "+ document " zugegriffen, JavaScript und die Konsole zum Aktualisieren einer Eigenschaft des Objekts " document +" verwendet und den Unterschied zwischen HTML-Quellcode und DOM untersucht.

Ausführlichere Informationen zum DOM finden Sie auf der Seite Document Object Model (DOM) im Mozilla Developer Network.

Im nächsten Lernprogramm werden wichtige HTML-Begriffe besprochen, Informationen zur DOM-Struktur erhalten, die Knoten ermittelt, die gängigsten Knotentypen ermittelt und mit der Erstellung interaktiver Skripts mit JavaScript begonnen.

TOC