HTML5 - DOM Teil 1

Das SONNE was bezieht sich auf DokumentobjektmodellEs ist nichts anderes als eine Objektdarstellung der Elemente, die sich in unserem HTML-Dokument befinden, dank dessen können wir eine tiefere Verbindung mit Javascript herstellen und es werden sehr interessante Effekte erzielt; Um jedoch auf diese Ebene zu gelangen, müssen wir zunächst sehr gut wissen, wie wir uns innerhalb des DOM für dessen Implementierung und Nutzung handhaben.
Das DOM verstehen
Erweiterung des Konzepts von SONNE Wir können auch hinzufügen, dass es sich um eine Sammlung von Objekten handelt, die die HTML Im Dokument sehen wir in seinem Namen, was ein Modell ist, und das Schlüsselwort, das es repräsentiert, ist ein repräsentatives Modell des HTML-Dokuments.
Das DOM ist ein Schlüsselwerkzeug in der WEB-Entwicklung, da es uns eine Brücke zwischen der Struktur und dem Inhalt zwischen unseren HTML- und Javascript-Dokumenten bietet.
Das hier angesprochene Modell wird vom Browser bei der Interpretation des HTML-Codes erstellt, die Grundstruktur eines DOM ist in der folgenden Abbildung in einem Diagramm wie folgt zu sehen:

Wie wir sehen, basiert es auf einer hierarchischen Struktur, damit erreichen wir, dass wir die Pfade dieser Beziehungen nutzen können, um über Javascript Informationen zu erhalten oder strukturelle Änderungen vorzunehmen.
Testen des DOM
Wir werden einige einfache Tests an unserem Dokument durchführen, damit wir uns daran gewöhnen, wie Sie damit arbeiten können. SONNE, einer der ersten Tests, die wir durchführen können, besteht darin, zu überprüfen, ob eine Funktion im Dokument verfügbar ist, wie im folgenden Code gezeigt:

 Beispiel
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten. 

Hier haben wir nur etwas Einfaches gemacht, zuerst prüfen wir, ob die Methode existiert querySelectorAll, wenn es existiert, dann weisen wir einer Variablen den Inhalt aller Elemente zu img sie haben die id Paratext, da wir eine Überprüfung durchführen, falls dies fehlschlägt, verwenden wir einen anderen Weg, um dieselben Daten zu erhalten, in diesem Fall ist es der getElementById und später getElementByTagNameAm Ende iterieren wir einfach mit unserer definierten Variable durch deren Inhalt und ändern deren CSS-Eigenschaften.
Das Negative, das wir hier sehen können, ist vielleicht, dass unser Code komplex und unlesbar werden kann, wenn wir viele Überprüfungen haben, alles ist eine Frage von Kompromissen zwischen dem, was wir erreichen wollen und dem Weg, es zu erreichen Ergebnisse.
Im nächsten Teil dieses Tutorials werden wir uns einige fortgeschrittenere Beispiele ansehen, wie Sie weiter mit dem DOM arbeiten können.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben