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

Mit node eine Webseite generieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Erlernen Sie, wie Sie mit node direkt auf den DOM-Baum zugreifen können, und Sie werden sehen, dass das keinesfalls trivial ist. Darum setzt man in der Praxis stattdessen oft auf innerHTML.
04:24

Transkript

In diesem Film wollen wir uns ansehen, wie Sie mit Node dynamisch Elemente in einer Webseite hinzufügen können. Wir brauchen dazu auch wieder document mit den Methoden zum Erzeugen von Elementen. Document und Node werden sehr oft zusammen benutzt, weil die sich ergänzen. Genauer genommen die Methoden von Documentum und die jenigen von Node. Und man sollte immer beachten, dass ein Documentobjekt auch vom Typ Node ist. Sie sehen hier in diesem Beispiel, dass ich wieder ein Attributobjekt erzeuge mit einer Methode von document.createAttribute, dann über nodeValue den Wert. Und nodeValue ist eine Eigenschaft eines Nodebjektes. Das gleiche hier wieder, ich erzeuge wieder ein Attribut mit einer Documentmethode und setze hier nodeValue. Dann erzeuge ich ein Element, das heißt also auch einen sprechenden Nodetyp und erzeuge einen Textknoten, dann entsprechend anderen Nodetype. AppandChild ist eine Nodemethode, um ein Kindelement anzuzeigen. Das heißt, wenn man das Verständnis eines Nodeobjects hat, das ein Textknoten ja immer ein Kindknoten von einem Elementknoten sein muss, dass ich hier den Text an das entsprechende Element als Kind anfüge. Dann erzeuge ich ein anderes Element, wieder einen Textknoten, benutze hier eine Methode insertData auch das ist eine Nodemethode, um Inhalt an einen Textknoten anzufügen und appandData fügt ebenso Text an einen Textknoten dran. Wenn Sie hier eine Position sehen, die Sie angeben können und dann wird dieser Textknoten als Kind an den entsprechendem Elementknoten U2 angefügt. Dann spreche ich den Body an und hänge hier diesen U2 Textknoten dran, dann nutze ich eine andere Nodemethode, die heißt insert for und füge U1 vor U2 der Webseite hinzu und füge dann ein Element vom Typ H1 die Attributknotenausrichtung und CSS hinzu und abschließend füge ich dem Element U2 Attributknoten hinzu. Dazu gibt es setAttribut und setAttributNode. Wir gucken uns es erst mal das Resultat an. So sieht das aus und Sie können mit Firebug diese Seite wieder untersuchen. Und Sie sehen das ist eine im grunde fasst wie mit statischen html-befehlen aufgebaute Seite. Nun ist mir vollkommen klar, dass Sie vermutlich nicht eigenständig mit diesem Nodeobjekt arbeiten können, nachdem Sie jetzt so ein Beispiel gesehen haben. Das ist viel zu komplex. Das ist noch nicht Ziel. Sie sollten nur sehen, was man mit diesen Objekt machen kann. Sie haben, das hatte ich schon mehrfach erwähnt, alternative Möglichkeiten die aus meiner Sicht einfacher sind. Und die ehrlich gesagt auch in der Praxis meistens eingesetzt werden, das ist innerHTML oder document.write. Also einfachere Techniken in denen Sie fast das gleiche erreichen, allerdings eben dann nicht so hart am Dobben sozusagen segeln, sondern mehr auch mit der Denkweise von HTML an das Problem rangehen. Tatsächlich ist das eigentlich die neuere Vorgehensweise, aber die alten Techniken haben sich dennoch durchgesetzt. Dieses Zeug hier erweist sich als sehr sperrig und sehr kompliziert und das wird noch schwerer, es läuft nicht in allen Browsern unter Umständen gleich. Nicht das Generieren dieser ganzen Sachen, aber wenn man auf dem Dom navigieren möchte. Von daher lassen Sie sich bitte von diesem Beispiel nicht abschrecken. Es ist mehr informativ zu sehen, was kann man denn mit diesen Objekten machen. Sie wissen jetzt, was das Nodeobject ist und wenn Sie für sich den Entschluss fassen, das ist mir zu schwer, einverstanden. Sie werden trotzdem alles hinbekommen, was auch immer Sie mit Javascript machen wollen, wenn Sie eben andere Wege gehen.

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)
Derzeit sind keine Feedbacks vorhanden...
 

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!