HTML-Baum und Zugriff über DOM darauf
Das Verständnis des DOM ist sehr wichtig. Daher wird es hier in aller Ausführlichkeit erklärt.
Über dieses Model können wir auf jedes Element einer HTML-Seite und seine Inhalte zugriefen und diese auslesen, ändern, ersetzen und auch setzen. Aber der Reihe nach. Erst das Verständnis wie der Aufbau ist.
Dazu schauen wir uns eine sehr einfach HTML-Datei an:
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<h1>Überschrift 1</h1>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
</body>
</html>
Diese HTML-Datei sollten wir uns als einen Baum vorstellen. Dabei schauen wir uns nur die sichtbaren Bereiche an und vereinfachen natürlich. Würden wir den Inhalt unserer Beispiel-HTML-Seite nun in einer Baumstruktur darstellen, sieht das so aus:
Das sieht natürlich eher wie ein sehr windschiefer Baum direkt aus dem Norden aus.
Einfach einmal den Kopf nach rechts legen, dann wird die Baumstruktur besser sichtbar. Die grünen und orangen Kästchen wären die Blätter ganz oben. Gelb sind die Ästchen zu den Blättern und blau die dickeren Äste zu den kleinen Ästchen. Und in braun (gerade noch grau) ist der Stamm mit Wurzel (genannt Root-Element).
Soweit so gut – jetzt wollen wir auf die einzelnen Elemente über JavaScript zugriefen. Hierzu gibt es die Anweisung document. Geben wir document in der Konsole ein, sehen wir die Struktur.
Auf den Baum können wir über die Kindelemente (über children) auf jedes Element zugreifen. Über die Eingabe von document.children erhalten wir unser erstes Element – sprich das Element html.
Jetzt können wir auf weitere Informationen zugriefen – dazu greifen wir über folgenden Aufbau auf das erste Element (das unter der Zahl 0 läuft) zu: document.children[0]
Zu diesem Aufbau mit den eckigen Klammern und der 0 kommen wir später im Kapitel Arrays. Technisch ist das ein Array, was zum jetzigen Verständnis noch nicht wichtig ist zu wissen. Wichtig ist nur, dass Array den ersten Inhalt unter 0 ablegen! Daher müssen wir für unseres Element auf die 0 zugreifen.
Und jetzt können wir das Spiel weitertreiben. Wir können auf die Kinder der Kinder (children bedeutet ja nichts anderes) zugreifen. Wenn wir also bei unserem ersten Element (html) auf das nächste erste Element zugreifen, bekommen wir Zugriff auf head.
document.children[0].children[0]
Greifen wir beim zweiten Element auf den zweiten Ast zu (zur Verwirrung, erster Ast hat nur Nummer 0 und der zweite Ast hat die Nummer 1) bekommen wir unseren Ast body.
Zur Erinnerung nochmals unser farbiger DOM-Baum:
Schön verwirrend? Das macht auch nur bedingt Spaß, daher nutzt man normalerweise die folgenden komfortableren Möglichkeiten:
document.getElementById("id")document.getElementsByClassName("farbe1")document.getElementsByTagName("h2")
Diese Möglichkeiten schauen wir uns in den folgenden Kapiteln an.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
