Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Knoten dynamisch erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mehrere Methoden von document dienen zum Erzeugen von Knoten, um eine Webseite dynamisch per Skript aufzubauen. createAttribute(), createElement() und createTextNode() sind wichtige Methoden in der fortgeschrittenen JavaScript-Programmierung.
04:49

Transkript

Mehrere Methoden von document sind dazu da, dass sie damit dynamisch Knoten erzeugen können. Das Thema ist nicht ganz trivial, weil man relativ abstrakt sich die Struktur einer Webseite vorstellen muss, in Form einer Baumstruktur, aber die Möglichkeiten sind riesig. Sie können diese Webseite vollkommen dynamisch aus Javascript erzeugen und brauchen rein gar nichts mehr mit HTML Body einer Webseite zu schreiben. Es gibt beispielsweise eine Methode createElement, um ein Element zu erzeugen. Es gibt eine Methode createTextnode, um einen Textknoten aufzubauen und es gibt eine Methode createAttribute, um attributknoten aufzubauen. Diese ganze Logik ist an dem Noteobjekt orientiert und diese Knotenphilosophie gehört, um es noch mal zu betonen zu den eher schwierigen und abstrakten Techniken im Umfeld der JavaScript-Programmierung. Trotzdem möchte ich Ihnen einen Beispiel zeigen, wie man so etwas machen kann. Sie sehen was bereits hier vorbereitet. Ich nehme das Objekt document und die Methode createAttribute und das Attribut heißt bgcolor. Sie werden es vielleicht kennen, das stammt von dem bodytec und legt die Hintergrundfarbe fest. Der Body hat zurzeit noch kein entsprechendes Attribut und das wird in einer Variable gespeichert. Die Eigenschaften NodeValue ist der Wert, der diesem Attribut zugewiesen werden soll. Diesen Knoten, ein Knoten im Sinne des Nodeobjektes. Ich erzeuge dir ein zweites Attribu t mit Namen Text, auch das gibt es beim bodytech und weise auch diesem einen Wert zu. Allerdings das sind zurzeit nur Variablen, die in Javascript vorkommen. Die haben noch nichts mit der realen Webseite zu tun, aber im nächsten Schritt selektiere ich den Body mit getElementsByTagName von Body von 0, es kann zwar nur einen Body geben, aber da Sie ein RE zurückbekommen, müssen Sie trotzdem auch dann einen Index setzen und dann rufe ich eine Methode setAttributeNode auf. Auch diese stammt vom Nodeobjekt. Damit setzen Sie so ein Attributknoten und zwar einmal setzte das Attribut in der Grundfarbe, also passt mir bgcolor und einmal Vordergrundfarbe und das ist Text. Und jetzt hat der Body die Attribute bgcolor und Text mit den entsprechenden Werten. Hier erzeuge ich ein Element, kein Attribut, ein Element mit createElement, auch eine Methode von document. Hier kann ich jedes Element erzeugen, dass im Rahmen einer Webseite vorkommen kann. Das heißt eine Überschrift H1, ein Div, Ein image, volkommen egal, aber auch dises ist noch nicht der Webseite hinzugefügt worden. Und vor allen Dingen hätte ich auch gerne ein Inhalt von diesem Element und dazu gibt es die Methode createTextNode. Damit können Sie einen Textknoten erzeugen, auch eine Methode wie Sie sehen von document und als Parameter wird der Inhalt von diesem Textkmoten gesetzt. Und jetzt müssen wir die Dinge noch zusammenkriegen mit appendChild, einer weitere Methode von Node hänge ich diesen Textknoten an den Elementknoten der von U1 repräsentiert wird und dann hänge ich diesen Elementknoten mit appendChild an den Body Webseite. Wir schauen uns mal das Resultat an. So sieht es aus und wenn man mit Firebug diese Seite untersucht, dann sehen Sie das es ein Attribut bgcolor gibt, ein Attribut Text und das ist hier eine Überschrift der Ordnung H1 gibt mit diesen Inhalt. Vergleichen Sie das noch mal, mit der tatsächlich mit HTML erzeugten Struktur. Dort war nichts da, das ist alles dynamisch erzeugt. Dennoch ist es garantiert nicht für alle der erste Weg mit dem man so eine Seite dynamisch baut. Ich persönlich bin kein Freund von dieser Art eine Webseite zu bauen. Alternativ können Sie nämlich mit innerHTML fast genauso flexibel die Seiten bauen, aber das ist viel viel leichter verständlich. Man muss nur etwas mehr HTML direkt machen, auch wenn es dynamisch generiert wird. Sie kennen aber jetzt beide Varianten, innerHTML zum Schreiben von Inhalten von HTML Elementen mit Text, oder aber diese ganzen Erzeugungsmethoden mit denen sie direkt auf dem Dom arbeiten. Sie haben die Wahl.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Alles super erklärt, aber....
Lars K.

Hallo, die Erklärungen in dem Video sind super und auch für mich als Neueinsteiger gut zu verstehen, wobei mir auch die Einleitung (Sprich bis es ans eigentliche JS geht) zu lang war. Für das genau nachvollziehen der Scripte wäre es aber gut, wenn man beispielsweise bei dem Video mit der Formularplausibilisierung auch die HTML + JS Dateien bekommen könnte, so muss man nicht immer im Video hin und her springen um sich den Code nocheinmal anschauen zu können. Danke trotzdem danke für das neu erwobende Wissen, auch wenn ich noch nicht das ganze Video gesehen habe.

 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!