Einführung in die DOM

Unabhängig von der Aktion, die wir auf einer HTML -Webseite ausführen, wie das Ändern eines Elements, das Ändern der Attribute eines Elements oder das Ändern des Stils eines Elements mithilfe einer Skriptsprache, wird mit Hilfe des DOM ausgeführt. Dies liegt daran.

DOM kann als Struktur des Dokuments bezeichnet werden, in dem das Dokument eine HTML -Webseite oder eine XML -Seite sein kann. In diesem Beitrag werden wir wissen, was DOM ist, wie man mit Live DOM -Zuschauern arbeitet und wie man mit einer Skriptsprache auf Elemente zugreift.

Was ist Dom?

DOM steht für das Dokumentobjektmodell und gilt als Standard für den Zugriff auf, zu ändern und Elemente aus dem Dokument. Dieser Standard wird von der festgelegt W3C (World Wide Web Consortium) Und deshalb wird DOM am häufigsten als W3C DOM bezeichnet. Das World Wide Web Consortium definierte DOM als eine Schnittstelle, die Sprachen hilft, mit einem Dokument zu interagieren und gleichzeitig sprachneutral zu bleiben.

Der Dokumentieren In DOM steht für ein Dokument, das ein HTML -Dokument oder ein XML -Dokument sein kann. Der Objekt in DOM wird verwendet, um sich auf Elemente oder Knoten des Dokuments zu beziehen. Während Modell im DOM bezieht sich auf die Struktur (oder den Baum) des Dokuments.

Außerdem wirkt das DOM wie eine Anwendungsschnittstelle (API) für die Skriptsprache, um Elemente des HTML -Dokuments zu ändern

Die Struktur des Dokuments ist ein bisschen wie ein Baum. Es enthält den übergeordneten Knoten und die untergeordneten Knoten.

Arbeiten mit Live -DOM -Zuschauern

Einige Websites bieten uns Live -DOM -Generatoren, einer dieser lebenden DOM -Zuschauer wird auf CodePen bereitgestellt.io. Beachten Sie die folgenden Elemente auf der HTML -Webseite:

Google	Bing
John Doe, Ruski	Kalifornien

Um die DOM -Hierarchie mit dem JavaScript -Code auf Codestift zu generieren, kopieren Sie diese HTML -Elemente in DOM -Viewer auf CodePen und fügen Sie sie ein.io

Unterhalb dieser HTML -Registerkarte auf "Codepen", Sie können die DOM -Hierarchie sehen wie:

Sie können deutlich die übergeordneten Knoten, Kinderknoten und Geschwisterknoten basierend auf ihrer Einklingel in der Struktur sehen

Zugriff auf HTML -Elemente mit JavaScript

JavaScript bietet mehrere Methoden zum Verknüpfen der Elemente auf einer HTML -Webseite, indem Sie mit der DOM interagieren. Diese Methoden sind nämlich:

• GetElementById ()
• GetElementByClassName ()
• GetElementByName ()
• GetElementByTagName ()
• GetElementByTagns ()

Um dies zu demonstrieren, erstellen Sie eine HTML -Seite mit den folgenden Zeilen:

Ich bin ein P -Tag im Dom

Fügen Sie den Link zur Skriptdatei mit der folgenden Zeile hinzu:

Fügen Sie in der Skriptdatei die folgenden Codezeilen hinzu, um die Hintergrundfarbe davon zu ändern P -Tag:

var ptag = dokument.GetElementById ("Demo");
PTAG.Stil.HintergrundColor = "Yellow";

Sie erhalten das folgende Ergebnis im Browser:

Da Sie gehen, haben Sie den Stil eines Elements mithilfe der Skriptsprache verändert.

Abschluss

Das DOM wird als Standard von W3C (World Wide Web Consortium) als Schnittstelle für die Skriptsprache festgelegt, um mit den Elementen des Dokuments zu interagieren (HTML oder XML). Die Skriptsprache (z. B. JavaScript) kann nicht direkt auf die Elemente der Webseite zugreifen. Daher interagiert es mit dem DOM und das DOM wirkt wie eine API und führt Änderungen in den Elementen der HTML -Webseite durch. Die Dom -Struktur ist wie ein Baum, der über Elternknoten, Kinderknoten und Geschwisterknoten verfügt.