Advertisement
  1. Code
  2. Web Development

JavaScript und die DOM-Reihe: Lektion 1

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Hallo und willkommen zum ersten Teil einer hoffentlich umfangreichen Reihe, die Kernaspekte der JavaScript-Programmiersprache und der DOM-API abdeckt.

Während Frameworks wie jQuery, Prototype und MooWerkzeugs großartige Möglichkeiten sind, Browserfehler zu unterdrücken und die Entwicklung zu beschleunigen, ist es wichtig, die zugrunde liegenden Technologien zu kennen und zu verstehen. In dieser Reihe erfahren Sie, was Sie über JavaScript und das Document Object Model (DOM) wissen müssen. Selbst wenn Sie auf eine bestimmte Bibliothek schwören, wird dies Ihnen dennoch zugute kommen - zu wissen, wie etwas unter der Haut funktioniert, kann nur eine gute Sache sein!

Einführungen

JavaScript

JavaScript ist eine dynamische, lose typisierte, prototypbasierte Programmiersprache, die in vielen verschiedenen Umgebungen verwendet wird. Es ist nicht nur die vorherrschende clientseitige Programmiersprache des Webs, sondern wird auch zum Schreiben von Plugins für IDEs, in PDF-Dateien und als Grundlage für andere Plattformen und höhere Abstraktionen verwendet.

JavaScript basiert auf dem ECMAScript-Standard (ECMA-262) und wurde von Brendan Eich von Netscape erstellt. Es hieß ursprünglich LiveScript, wurde aber später in JavaScript umbenannt, wahrscheinlich mit der alleinigen Absicht, Verwirrung zu stiften.

Hier sind einige seiner Funktionen etwas detaillierter:

  • Dynamische Programmiersprachen werden zur Laufzeit ausgeführt. Sie werden nicht kompiliert. Aus diesem Grund wird JavaScript manchmal als Skriptsprache im Gegensatz zu einer echten Programmiersprache angesehen (offensichtlich ein Missverständnis). Wenn Sie JavaScript in einem HTML-Dokument haben, wird es analysiert, wenn die Seite im Browser geladen wird, also zur "Laufzeit".
  • Locker getippte Sprachen bestehen nicht auf einem starken Typisierungssystem. Wenn Sie in C oder Java programmiert haben (nicht dasselbe wie JavaScript), wissen Sie, dass Sie beim Deklarieren einer Variablen einen Typ wie 'int' (Ganzzahl) angeben müssen. JavaScript unterscheidet sich darin, dass Sie den Typ nicht angeben müssen.
  • Um eine Vererbung in JavaScript durchzuführen, müssen Sie sogenannte Prototypen verwenden. JavaScript unterstützt keine Klassen.
  • JavaScript ist auch eine funktionale Sprache. Es behandelt Funktionen als erstklassige Objekte. Das ist die Idee hinter Lambda.

Das Verständnis der oben genannten Punkte ist nicht wichtig, um etwas über JavaScript zu lernen. Es sind nur ein paar Ideen, um Ihr Gehirn in Schwung zu bringen, und sie sollen Ihnen helfen, JavaScript von anderen Programmiersprachen zu unterscheiden, die Sie möglicherweise erlebt haben.

Dokumentobjektmodell

Das Dokumentobjektmodell, normalerweise mit DOM abgekürzt, ist die API, über die JavaScript mit Inhalten innerhalb einer Website interagiert. JavaScript und das DOM werden normalerweise als eine Einheit betrachtet, da JavaScript am häufigsten für diesen Zweck verwendet wird (Interaktion mit Inhalten im Web). Die DOM-API wird verwendet, um auf HTML- und XML-Dokumente zuzugreifen, diese zu durchlaufen und diese zu bearbeiten.

Typical structure of a DOM hierarchyTypical structure of a DOM hierarchyTypical structure of a DOM hierarchy
Ein grundlegender Überblick über die typische DOM-Hierarchie (vereinfacht)

Hier sind einige bemerkenswerte Dinge über das DOM:

  • Das Fensterobjekt dient als globales Objekt. Sie können darauf zugreifen, indem Sie einfach "Fenster" eingeben. In diesem Objekt wird der gesamte JavaScript-Code ausgeführt. Wie alle Objekte verfügt es über Eigenschaften und Methoden.
    • Eine Eigenschaft ist eine Variable, die unter einem Objekt gespeichert ist. Alle auf einer Webseite erstellten Variablen werden automatisch zu Eigenschaften des Fensterobjekts.
    • Eine Methode ist eine Funktion, die unter einem Objekt gespeichert ist. Da alle Funktionen (mindestens) unter dem Fensterobjekt gespeichert sind, können sie alle als "Methoden" bezeichnet werden.
  • Das DOM erstellt eine Hierarchie, die der Struktur jedes Webdokuments entspricht. Diese Hierarchie besteht aus Knoten. Es gibt verschiedene Arten von DOM-Knoten. Die wichtigsten sind "Element", "Text" und "Dokument".
    • Ein 'Element'-Knoten repräsentiert ein Element innerhalb einer Seite. Wenn Sie also ein Absatzelement ('<p>') haben, kann über das DOM als Knoten darauf zugegriffen werden.
    • Ein 'Text'-Knoten repräsentiert den gesamten Text (innerhalb von Elementen) innerhalb einer Seite. Wenn Ihr Absatz also etwas Text enthält, kann direkt über das DOM darauf zugegriffen werden.
    • Der Knoten 'Dokument' repräsentiert das gesamte Dokument. (Es ist der Wurzelknoten der DOM-Hierarchie/des DOM-Baums).
    • Beachten Sie auch, dass Elementattribute selbst DOM-Knoten sind.
  • Jede Layout-Engine hat eine etwas andere Implementierung des DOM-Standards. Zum Beispiel hat der Firefox-Webbrowser, der die Gecko-Layout-Engine verwendet, eine recht gute Implementierung (obwohl nicht ganz im Einklang mit der W3C-Spezifikation), aber Internet Explorer, der die Trident-Layout-Engine verwendet, ist für seine fehlerhafte und unvollständige Implementierung bekannt. ein Grund für viel Angst in der Webentwickler-Community!

Laden Sie Firebug herunter

Wenn Sie Firefox verwenden und das Firebug-Addon noch nicht haben, empfehle ich Ihnen, es jetzt herunterzuladen und zu installieren. Es ist ein sehr nützliches Werkzeug, um ein anständiges Bild der gesamten Dokumentstruktur zu erhalten.

JavaScript im Web

Das Skriptelement

Wenn Sie JavaScript auf einer Website verwenden möchten, muss es in einem SCRIPT-Element enthalten sein:

Wie Sie sehen, befindet sich am Ende unseres Dokuments ein SCRIPT-Element. Das TYPE-Attribut sollte streng auf "application/javascript" gesetzt werden, aber es ist nicht überraschend, dass dies in Internet Explorer nicht funktioniert, sodass wir entweder "text/javascript" oder gar kein TYPE-Attribut verwenden. Wenn Sie sich für die Validierung interessieren, wird der frühere Vorschlag wahrscheinlich zu Ihnen passen.

Specify CDATA if you're using XHTMLSpecify CDATA if you're using XHTMLSpecify CDATA if you're using XHTML

Denken Sie daran, Ihre Skripte als CDATA anzugeben!

Sie werden auch bemerkt haben, dass wir in diesem SCRIPT-Element einige auskommentierte Zeilen haben. Diese informieren XHTML-unterstützende Browser darüber, dass der Inhalt des SCRIPT-Elements 'character data' ist und nicht als XHTML-Markup interpretiert werden sollte. Dies ist nur dann wirklich erforderlich, wenn Sie die Zeichen '<' oder '>' in Ihrem JavaScript-Code verwenden möchten. Natürlich können Sie all dies vergessen, wenn Sie einfaches HTML verwenden.

Das Attribut "Aufschieben"

Jedes JavaScript, das wir in dieses SCRIPT-Element einfügen, wird beim Laden der Seite ausgeführt. Die einzige Ausnahme ist, wenn ein SCRIPT-Element das Attribut 'defer' hat. Wenn ein Browser auf ein SCRIPT-Element trifft, stoppt er standardmäßig den Code und führt ihn aus. Anschließend wird das Dokument weiter analysiert. Das DEFER-Attribut informiert den Browser darüber, dass der Code keinen Dokumentänderungscode enthält und daher später ausgeführt werden kann. Das einzige Problem dabei ist, dass es nur im IE funktioniert, daher ist es wahrscheinlich am besten, dieses Attribut zu vermeiden.

Verknüpfung mit externen Skripten

Wenn Sie eine Verknüpfung zu einer externen Skriptdatei herstellen möchten, fügen Sie Ihrem SCRIPT-Element einfach ein SRC-Attribut hinzu, das seinem Speicherort entspricht. Normalerweise ist es besser, separate Skriptdateien zu haben, als Code inline zu schreiben, da dies bedeutet, dass der Browser die Datei zwischenspeichern kann. Außerdem müssen Sie sich um diesen CDATA-Unsinn keine Sorgen machen:

JavaScript-Grundlagen

Bevor wir mit dem DOM fortfahren, ist es eine gute Idee, einige grundlegende JavaScript-Grundlagen zu verstehen. Wenn Sie Probleme haben, einige davon zu verstehen, machen Sie sich keine Sorgen - Sie werden sie schließlich abholen!

In JavaScript können Sie verschiedene Arten von Werten haben. Es gibt Zahlen, Zeichenfolgen, Boolesche Werte, Objekte, Undefiniert und Null:

Einzeilige Kommentare werden mit zwei Schrägstrichen (//) geschrieben. Der gesamte verbleibende Text in dieser Zeile wird vom Parser als Kommentar angenommen. Mehrzeilige Kommentare werden mit '/*' und '*/' gekennzeichnet, um den Kommentar zu beenden.

Zahlen

In JavaScript werden alle Zahlen als Gleitkommawerte dargestellt. Denken Sie beim Definieren einer Zahlenvariablen daran, sie nicht in Anführungszeichen zu setzen.

Saiten

Jede von Ihnen definierte Zeichenfolge wird wörtlich genommen, JavaScript verarbeitet sie nicht. Eine Zeichenfolge ist eine Folge von Unicode-Zeichen und sollte in ein passendes Paar aus einfachen oder doppelten Anführungszeichen eingeschlossen werden.

Boolesche Werte

Boolesche Typen sind nützlich, wenn Sie eine Bedingung bewerten möchten, um festzustellen, ob sie bestimmte Kriterien erfüllt. Es gibt nur zwei mögliche Boolesche Werte: true und false. Jeder Vergleich mit logischen Operatoren führt zu einem Booleschen Wert.

Das oben gezeigte '===' ist ein Vergleichsoperator, wir werden sie später behandeln.

Funktionen

Eine Funktion ist ein spezielles Objekt:

Arrays

Ein Array ist auch ein spezialisiertes Objekt und kann eine beliebige Anzahl von Datenwerten enthalten. Um auf Datenwerte innerhalb eines Arrays zuzugreifen, müssen Sie eine Zahl verwenden, die als "Index" des Elements bezeichnet wird, das Sie abrufen möchten:

Objekte

Ein Objekt ist eine Sammlung benannter Werte (Schlüssel-Wert-Paare). Es ähnelt einem Array. Der einzige Unterschied besteht darin, dass Sie für jeden Datenwert einen Namen angeben können.

If/Else-Anweisung

Eines der häufigsten Konstrukte in JavaScript ist die Anweisung 'IF' / 'ELSE'. Es geht ungefähr so:

JavaScript-Operatoren:

Anstatt sie alle hier aufzulisten, empfehle ich Ihnen, den MDC-Artikel über Operatoren zu besuchen. Es erklärt sie sehr detailliert. Ich habe einige Beispiele eingerichtet, um Ihnen eine Vorstellung davon zu geben, wie einige der folgenden Operatoren verwendet werden:

Schleifen

Schleifen sind nützlich, wenn Sie alle Elemente in einem Array oder alle Elemente eines Objekts durchgehen müssen. Die häufigste Methode zum Schleifen in JavaScript ist die Verwendung der FOR- oder WHILE-Anweisung.

About the FOR loop in JavaScriptAbout the FOR loop in JavaScriptAbout the FOR loop in JavaScript

FOR-Schleifen sind beim Durchlaufen von Arrays beliebter.

Zurück zum DOM

Zugriff auf DOM-Knoten

Nehmen wir an, wir haben ein einfaches XHTML-Dokument, das einen Absatz und eine ungeordnete Liste enthält:

In diesem ersten Beispiel greifen wir mit der DOM-Methode 'getElementById' auf unseren Absatz zu:

(Dieser Code befindet sich im SCRIPT-Element in der obigen Vorlage.)

Die Variable 'introParagraph' verweist jetzt auf den DOM-Knoten. Wir können mit diesem Knoten eine Reihe von Dingen ausführen - wir können seinen Inhalt und seine Attribute abfragen und jeden Aspekt davon manipulieren. Wir können es entfernen, klonen oder in andere Teile des DOM-Baums verschieben.

Alles, was in einem Dokument vorhanden ist, können wir mit JavaScript und der DOM-API aufrufen. Vielleicht möchten wir auf ähnliche Weise auf die ungeordnete Liste zugreifen. Das einzige Problem ist, dass sie keine ID hat. Sie könnten ihm eine ID geben und dann dieselbe Methode wie oben verwenden, oder wir könnten mit 'getElementsByTagName' darauf zugreifen:

getElementsByTagName

Die Methode 'getElementsByTagName' gibt eine Sammlung/Liste von Live-Knoten zurück. Es ähnelt einem Array darin, dass es eine Längeneigenschaft hat. Eine wichtige Sache, die Sie beachten sollten, ist, dass diese Sammlungen "live" sind. Wenn Sie dem DOM ein neues Element hinzufügen, wird die Sammlung selbst aktualisiert. Da es sich um ein Array-ähnliches Objekt handelt, können wir über einen Index von 0 bis zur Gesamtlänge der Sammlung (minus 1) auf jeden Knoten zugreifen:

Accessing nodes and attributes within the DOMAccessing nodes and attributes within the DOMAccessing nodes and attributes within the DOM

Zugriff auf Knoten und Attribute im DOM

Durchqueren des DOM

Der Begriff "Traverse" wird verwendet, um die Aktion des Reisens durch das DOM zu beschreiben, wobei Knoten gefunden werden. Die DOM-API bietet uns zahlreiche Knoteneigenschaften, mit denen wir alle Knoten in einem Dokument nach oben und unten verschieben können.

Diese Eigenschaften sind allen Knoten eigen und ermöglichen Ihnen den Zugriff auf verwandte/geschlossene Knoten:

  • Node.childNodes: Mit dieser Option können Sie auf alle direkten untergeordneten Knoten eines einzelnen Elements zugreifen. Es wird ein Array-ähnliches Objekt sein, das Sie durchlaufen können. Knoten in diesem Array enthalten alle verschiedenen Knotentypen, einschließlich Textknoten und anderer Elementknoten.
  • Node.firstChild: Dies entspricht dem Zugriff auf das erste Element im Array 'childNodes' ('Element.childNodes[0]'). Es ist nur eine Abkürzung.
  • Node.lastChild: Dies entspricht dem Zugriff auf das letzte Element im Array 'childNodes' ('Element.childNodes[Element.childNodes.length-1]'). Es ist nur eine Abkürzung.
  • Node.parentNode: Hiermit erhalten Sie Zugriff auf den übergeordneten Knoten Ihres aktuellen Knotens. Es wird immer nur einen übergeordneten Knoten geben. Um auf die Großeltern zuzugreifen, verwenden Sie einfach 'Node.parentNode.parentNode' usw.
  • Node.nextSibling: Damit erhalten Sie Zugriff auf den nächsten Knoten auf derselben Ebene innerhalb des DOM-Baums.
  • Node.previousSibling: Damit erhalten Sie Zugriff auf den letzten Knoten auf derselben Ebene innerhalb des DOM-Baums.
Traversing the DOMTraversing the DOMTraversing the DOM

Durchlaufen eines Dokuments (vereinfacht - bitte unten lesen)

Wie Sie sehen, ist das Durchlaufen des DOM unglaublich einfach. Es geht nur darum, die Eigenschaftsnamen zu kennen.

Bei der obigen Grafik ist Folgendes zu beachten: Die Listenelemente können nur dann auf diese Weise abgerufen werden, wenn zwischen ihnen kein Leerzeichen steht. Da Sie Text- und Elementknoten in einem Dokument haben können, zählt der Abstand zwischen dem '<ul>' und dem ersten '<li>' tatsächlich als Knoten. In ähnlicher Weise ist die ungeordnete Liste nicht das nächste Geschwister des Absatzes - da sie sich in einer neuen Zeile befindet, ist zwischen den beiden Elementen Platz - daher ein weiterer Knoten! Normalerweise würden Sie in dieser Situation das Array 'childNodes' durchlaufen und den 'nodeType' testen. Ein 'nodeType' von 1 bedeutet, dass es ein Element ist, 2 bedeutet, dass es ein Attribut ist, 3 bedeutet, dass es ein Textknoten ist. Eine vollständige Liste finden Sie hier: https://developer.mozilla.org/En/DOM/Node.nodeType.

Das ist alles was es ist!

So funktionieren alle wichtigen JavaScript-Bibliotheken hinter den Kulissen. Verwenden Sie native DOM-Methoden und -Eigenschaften, um über eine gut polierte Abstraktion auf diese Elemente zuzugreifen. Was Sie von den Framework-Diehards unterscheidet, ist, dass Sie jetzt eine Vorstellung davon haben, wie Sie ohne Framework überleben können (wenn Sie es nicht bereits getan haben)!

Bis zum nächsten Mal...

Nun, das war's für Teil eins. Ich hoffe, Sie haben aus all meinen Streifzügen etwas gelernt. Im nächsten Teil der Reihe werden wir uns hoffentlich auf einige weitere anwendbare Beispiele konzentrieren. Wir werden wahrscheinlich auch das Browser-Ereignismodell behandeln.

In der Zwischenzeit und wenn Sie es noch nicht getan haben, lesen Sie diese Vorträge von Doug Crockford (Yahoo! Video Site):

Danke fürs Lesen!

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.