1. Document Object Model (DOM)

„Das DOM enthält Informationen, die JavaScript benötigt, um mit den Elementen auf einer Webseite zu kommunizieren“, sowie Werkzeuge um Änderungen oder Erweiterungen vorzunehmen. Das DOM ist ein vom WWWC definierter Standard und kein JavaScript. Das DOM bezeichnet alle Elemente, Attribute und Texte als Knoten und versteht sie als einzelne Einheiten. 

Eine Webseite wird als eine Ansammlung von Knoten vom DOM betrachtet. Die Knoten der Webseite kann man über folgende Methoden auswählen: 

getElementById() oder getElementByTagName()

GetElementById() bewirkt eine Lokalisierung eines einzelnen Knotens. Die Seite wird nach dem ID-Tag durchsucht. Die ID des Knotens wird an die Methode als Argument übergeben. Als Argument erwartet die Methode einen String. Der Befehl gibt eine Referenz auf den gesuchten Knoten zurück, welche in einer Variablen gespeichert werden kann.

GetElementByTagName() funktioniert genau gleich wie die GetElementById()-Methode, kann aber eine Liste von Elementen bzw. Knoten als Ergebnis liefern. Als Argument wir der Name des Tags übergeben, nachdem gesucht werden soll. Die Liste kann in einer Variablen abgespeichert werden und verhält sich dabei ähnlich wie ein Array. Auf die einzelnen Knoten kann über einen Index zugegriffen werden, die Gesamtzahl kann über length abgefragt werden. 

Darüber hinaus können auch angrenzende Knoten ausgewählt werden. Dies kann über sogenannte Nachkommen-Selektoren gemacht werden. Das DOM sieht Tags, die andere Tags umschließen. Es wird unterschieden in Elternknoten, Kinderknoten und Geschwister.

Das Einfügen von Inhalt auf einer Seite ist sehr aufwendig, da alle Knoten einzeln erstellt werden müssen. Hier helfen Browserhersteller, da sie Methoden wie die innerHTML- Eigenschaft anbieten. Die Methode kann den Inhalt eines Knoten bestimmen und ihn ändern.

Schwächen des DOM 

Es muss ein hoher Zeitaufwand betrieben werden, um sich innerhalb des DOMs von Knoten zu Knoten zu navigieren und bietet mehrere Optionen die gleiche Aktion durchzuführen. Gleichzeitig gibt es keine einfach Lösung um Elemente gemeinsam mit einer Aktion zu bearbeiten. Das Dom wird außerdem von den Browsern unterschiedlich interpretiert. Eventuell werden in einem Browser mehr Knoten erzeugt als in einem Anderen, oder Whitespace wird unterschiedlich dargestellt.

2. JavaScript Bibliotheken

Eine Bibliothek bietet eine Sammlung von JavaScript Funktionen, die Standardlösungen anbietet. So müssen einfach Lösungen nicht neu geschrieben werden. Eine dieser Bibliotheken ist beispielsweise das jQuery. Vorteile von jQuery sind die relativ kleine Dateigröße; es ist anwenderfreundlich, altbewährt und kostenlos.

2.1 jQuery Framework 

jQuery ist eine Bibliothek von JavaScript Funktionen, die eine strukturierte Gesamtheit von kooperierenden Methoden bereitstellt. 

Ein jQuery-Object wird am Anfang als primäre Collection bezeichnet. Es enthält darin verkapselte HTML Elemente. Primär liefert eine jQuery Methode auch nur jQuery-Objects zurück. jQuery Methoden werden einfach verkettet.

$(selektorausdruck).methode1().methode2();

Bildung primäre Collection                 $(argument)
Bildung sekundäre Collection            $(argument).methode()
Bildung tertiäre Collection                  $(argument).methode().filter()

2.2 Gruppen von jQuery Methoden

Jedem jQuery-Object stehen alle jQuery-Methoden zur Verfügung.

Die transparente jQuery-Methode geben ein jQuery-Object zurück, welches der Eingabe Collection entspricht. Die Elemente der Collection können bearbeitet werden, die Collection selbst bleibt aber unverändert und wird so auch weitergegeben. Sie können verkettet werden.

Die destruktive jQuery-Methode geben ein jQuery-Object zurück, welches nicht der Eingabe Collection entspricht. Sie können verkettet werden.

Die terminierende jQuery-Methode gibt kein jQuery-Object zurück, sondern bspw. String oder anderen Datentyp. Auf Rückgabewerte kann keine jQuery Methode angewandt werden. Sie können nicht verkettet werden, eine solche Methode beendet eine jQuery Kette.