GlossarWiki - Benutzerbeiträge [de-formal]

JavaScript-Tutorium:Browser

2014-11-09T10:49:12Z

Anmize8: /* Löschen von Elementen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren immer zwei unterschiedliche Arten von Objekten und Funktionen.
'''Native Objekte''' werden von der JavaScript-Engine zur Verfügung gestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind hingegen nicht zwingend standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser selbst und externe Geräte.

==HTML5-Standard==

Das bedeuteut, dass obwohl die Sprache selbst dem ECMAScript-Standard folgt, musste man bis vor wenigen Jahren
noch davon ausgehen dass sich die verfügbaren APIs je nach Browser sehr stark unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den allgemein akzeptierten
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation jedoch zunehmend.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox, Chrome und Internet Explorer
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Beim Besuch einer Website lädt der Browser das HTML-Dokument unter der angegeben URL herunter und evaluiert es.
Das Dokument enthält dann wiederum optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code-Blöcke enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten und das Caching des Browser aus,
die enthaltenen Anweisungen und Ausdrücke werden jedoch nicht davon beeinflusst.

'''Anmerkung:'' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist allerdings wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede geladene Web-Seite, unabhängig davon ob sie im separaten Fenster oder als ein weiterer Tab angezeigt wird,
erzeugt der Browser einen separaten und isolierten JavaScript-Kontext, in dem der geladene Code ausgeführt wird.
Das bedeutet dass alle Objekte und Funktionen nur so lange am Leben sind bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten in anderen Fenstern oder Tabs ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Im Browser können einem Fenster beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das automatisch erstellte Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>

</source>

Das oben dargestellte Markup wird bei der Interpretation durch den Browser in folgendes Objektmodell übersetzt:
* Ein <code>html</code>-Knoten mit den Unterknoten <code>head</code> und <code>body</code>
* Ein <code>head</code>-Knoten mit dem Unterknoten <code>title</code>
* Ein <code>title</code>-Knoten mit einem Text-Unterknoten
* Ein <code>body</code>-Knoten mit den Unterknoten <code>p</code> und <code>input</code>
* Ein <code>p</code>-Knoten mit einem Text-Unterknoten und einem Kommentar-Unterknoten
* Ein <code>input</code>-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist klar erkennbar.

===Markup-Korrekturen===

Es ist zu beachten, dass es sich beim Objektmodell '''nicht''' um ein eindeutiges Abbild des originalen Markups handelt.
Der Unterschied wird besonders deutlich wenn man das Resultat von folgendem invalidem HTML untersucht.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>

</source>

Das Objektmodell fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein damit das HTML valide wird.'''Tipp:''' Im Browser kann man das Objektmodell einer Seite mit dem (DOM) Inspector der Entwicklerwerkzeuge betrachten.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen bestimmten numerischen Typen, welcher in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die folgende Liste enthält die gängigsten Typen von Dokumentenknoten denen man bei der Arbeit mit Dokumenten begegnet:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Ein Dokument wird mit dem <code>Document</code>-Konstruktor erzeugt und ist selbst keinem Dokument, jedoch einem Fenster zugeordnet.

<source lang="javascript">
console.log(document.defaultView);
console.log(window == document.defaultView);
</source>

Das Dokument selbst repräsentiert kein HTML-Element, verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe der Funktionen eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.
===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften eines HTML-Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

===Comment-Objekte===

HTML-Kommentare werden in Comment-Objekte umgewandelt welche mit dem <code>Comment</code>-Konstruktor erzeugt werden.

===Text-Objekte===

Texte werden in <code>Text</code>-Objekte umgewandelt, wobei auf diese auch durch übergeordnete Elemente zugegriffen werden kann.
Normalerweise wird bei der Anwendungsprogrammierung mit JavaScript nicht direkt mit Text-Knoten gearbeitet.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Schnittstelle eines <code>Document</code>-Objekts unter der Angabe eines Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem aufgerufenen Dokument als zugehörig markiert durch die Eigenschaft <code>ownerDocument</code>.

<source lang="javascript">

var block = document.createElement('div');
console.log(block.ownerDocument);

</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.
<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);

</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die Suche nach einem eindeutigen Element kann mithilfe einer ID ausgeführt werden, insofern das HTML-Element eine besitzt.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
console.log(inhalt);

</source>

Bei einer Suche wird entweder das Dokument selbst oder aber ein beliebiges Element als Ausgangspunkt verwendet.Es wird dann jeweils immer nur unterhalb des Ausgangsknotens gesucht, was sich positiv auf die Performance auswirken kann.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
var kommentare = inhalt.getElementById('kommentare');

</source>

Werden Elemente einer bestimmten Art gesucht so kann der Tag-Name oder aber die HTML-Klasse als Kriterium genutzt werden.

<source lang="javascript">
var elemente = document.getElementsByTagName('body');
console.log(elemente);

var kommentare = document.getElementsByClassName('kommentar');
console.log(kommentare.length);
</source>

Bei dieser Art von Suche wird eine <code>NodeList</code> als Ergebnis zurückgeliefert, ein Array-artiges Objekt von Node-Elementen.Einzelne Elemente dieser Liste können entweder über eine Funktion oder aber über einen Index abgefragt werden.

<source lang="javascript">
var absaetze = document.getElementsByTagName('p');
console.log(absaetze);
console.log(absaetze.item(0));
console.log(absaetze.item(0) == absaetze[0]);

</source>

===Verweise===
Jedes Element verweist im Sinne einer Baumstruktur auf seine übergeordneten und untergeordneten Knoten und seine Nachbaren.

<source lang="javascript">
var body = document.getElementsByTagName('body').item(0);
for (var i = 0; i < body.childNodes.length; i++) {
console.log(body.childNodes[i]);
}
console.log(body.parentNode);
</source>

Diese Referenzen können genutzt werden um sich durch das Dokument zu bewegen und bestimmte Elemente zu finden.

<source lang="javascript">
var container = [];
var absaetze = document.getElementsByTagName('p');
for (var i = 0; i < absaetze.length; i++) {
container.push(absaetze[i].parentNode);
}
console.log(container);
</source>

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien und Verweisen auf benachbarte Elemente hat gewisse Limitierungen.
Aufgrund dessen enstand durch bekannte Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche heute als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt eine beliebige Menge an Kriterien, die auf ein oder mehrere HTML-Elemente zutrifft.
Der Name wurde so gewählt da CSS-Selektoren ebenso in Stylesheets genutzt werden um eine Menge an Elementen auszuwählen.
Aufgrund der Kombinierbarkeit einzelner CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Im Browser gibt zwei verschiedene Funktionen um Elemente mithilfe von CSS-Selektoren zu suchen:

* <code>document.querySelector</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var inhalt = document.querySelector('#inhalt');
console.log(inhalt);

</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.
<source lang="javascript">
var kommentare = document.querySelectorAll('.kommentar');
console.log(kommentare);

</source>

Mithilfe von eckigen Klammern (<code>[]</code>) werden beliebige Attribute als Kriterium definiert.
<source lang="javascript">
var textFelder = document.querySelectorAll('[type="text"]');
console.log(textFelder);

</source>

Wird kein Attributwert vergeben, wird lediglich auf die Existenz des Attributs geprüft.<source lang="javascript">

var versteckteElemente = document.querySelectorAll('[hidden]');
console.log(versteckteElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var wichtigeKommentare = document.querySelectorAll('.kommentar.wichtig');
console.log(wichtigeKommentare);
var versteckteAbsaetze = document.querySelectorAll('p[hidden]');
console.log(textFelder);

</source>

Es ist sogar möglich Kriterien für übergeordnete Elemente zu definieren indem man die Selektoren durch Leerzeichen trennt.
<source lang="javascript">
var versteckteElementeInnerhalbVonKommentaren = document.querySelectorAll('.kommentar [hidden]');

</source>

'''Anmerkung:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.
'''Anmerkung:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var absatz = document.createElement('p');
document.documentElement.appendChild(absatz);

</source>

Dazu muss immer der künftig übergeordnete Knoten angesprochen werden wenn das Element an einer bestimmten Stelle landen soll.<source lang="javascript">

var absatz = document.querySelector('p');
var unterAbsatz = document.createElement('p');
absatz.appendChild(unterAbsatz);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text===

Ein <code>Element</code>-Objekt mit nur einem <code>Text</code>-Unterknoten stellt seinen Text über der Eigenschaft <code>textContent</code> zur Verfügung.

<source lang="javascript">
var p = document.querySelector('p');
console.log(p.textContent);

</source>

Der Text kann über diese Eigenschaft nicht nur gelesen sondern ebenso beliebig modifiziert werden.
<source lang="javascript">
var p = document.querySelector('p');
p.textContent = 'Hallo Welt';
</source>

===Ändern von HTML===

Eine wesentlich mächtigere Weise um den Inhalt eines Elements zu beeinflussen stellt die Eigenschaft <code>innerHTML</code> dar.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';

</source>

Neben einfachen Text-Änderungen lässt sich mithilfe dieser Eigenschaft das gesamte enthaltene HTML beeinflussen.Anstatt also mithilfe der DOM-Schnittstelle einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';

</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var absatz = document.createElement('p');
absatz.innerHTML = 'Tolle Website!';
absatz.setAttribute('class', 'kommentar');
document.querySelector('body').appendChild(p);

console.log(p.getAttribute('class'));

</source>

Außerdem kann mithilfe der Funktion <code>hasAttribute()</code> nach der Existenz eines Attributs gefragt werden.
<source lang="javascript">
var eingabefeld = document.querySelector('input[type=text]');
console.log('Ist das Eingabefeld Pflicht? ' + eingabefeld.hasAttribute('required'));
</source>

'''Anmerkung:''' Eine besondere Häufigkeit bei Attributsänderungen ist das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var absatz = document.querySelector('p');
absatz.classList.push('wichtig');

</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);

</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';

</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var liste = document.querySelector('ul');
var listenelement = liste.querySelector('li');
liste.removeChild(listenelement);

</source>

'''Anmerkung:''' Ist einem der übergeordnete Knoten nicht bekannt so kann man diesen mithilfe der Knotenverweise ermitteln.
<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var listenelement = document.querySelector('li');
entferneKnoten(listenelement);

</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich eine sequentiell ablaufende Folge von Instruktionen.
Ergeben sich Informationen jedoch nicht deterministisch zur Laufzeit bietet sich die ereignisorientierte Programmierung an.
Hierbei wird nicht mehr aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen einzelnen Kontrollfluss, sondern beliebig viele welche sogar auch parallel ablaufen können.

==Ereignisse im Browser==

Bei der Betrachtung von und der Interaktion mit Websites im Browser ergeben sich sehr viele unterschiedliche Ereignisse.
Zunächst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle anderen referenzierten Medien.
Diese Vorgänge lösen bereits nicht deterministische Ereignisse aus welche alleine durch den Browser verursacht werden.
So gibt es für die meisten Medien ein Ereignis welches beschreibt dass diese fertig geladen und gerendert wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse von Seiten des Benutzers eintreten.
Nahezu jede Benutzerinteraktion löst im Browser ein Ereignis aus welches wiederum in weiteren Aktionen resultiert.
Klickt der Benutzer auf einen Link so ist das ein Ereignis welches zur Folge hat dass die geklickte URL geladen wird.
Wird ein Scroll-Balken vom Benutzer bewegt ergibt sich daraus ein Ereignis welches den Browser in Folge scrollen lässt.

Zu den wichtigsten Arten von durch den Benutzer ausgelösten Ereignissen zählen:

* Mausbewegungen und -klicks
* Tastatureingaben
* Scrolling

Eine vollständige Auflistung der möglichen Ereignisse im Browser finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Browser und dem Benutzer gibt es auch andere Auslöser wie zum Beispiel mit der Website verbundene Server/Backends.

==Aufbau eines Ereignisses==

Im Sinne einer standardisierten Ereignisverarbeitung besitzt ein im Browser auftretendes Ereignis immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Regel in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Objekt mit einer pro Ereignis festgelegten Struktur, welches die wichtigsten Ereignisdaten enthält
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis festgelegt wird; in der Regel handelt es sich um DOM-Elemente

Beispiel für ein solches Ereignis: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der sogenannten '''Capturing-Phase''' wird zuerst ein Ereignis mit dem obersten Knoten im Dokument als Ziel erzeugt.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere DOM-Objekte als Unterknoten enthält.
Das wird schrittweise wiederholt für jeden untergeordneten Knoten auf dem Pfad zum eigentlichen Ziel des Ereignisses.

<source lang="javascript">
+ window (optional) - Ereignis mit window als aktueller Ziel
+ document - Ereignis mit body als aktueller Ziel
+ body - Ereignis mit body als aktueller Ziel
+ p (ursprüngliches Ziel)
</source>

'''Anmerkung:''' Bei manchen Ereignissen wird das <code>window</code>-Objekt als oberstes Objekt in die Hierarchie der Ziele mit aufgenommen.

===Target-Phase===

Ist der Browser nun beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis erzeugt, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis erzeugt.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Die Capturing- und Bubbling-Phasen bilden in ihrer Implementierung die Tatsache ab dass
wenn ein Ereignis auf einem Element stattfindet, dieses Ereignis ebenso für das Element umgebende Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird dieser auch in einer Stadt geboren, in einem Land geboren.

Einer der beiden oben beschriebenen Phasen wäre allerdings vollkommen ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Implementierungen der Browser-Hersteller existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis "DOMContentLoaded" beschreibt, dass eine Seite abgesehen siner externen Medien fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses welches verarbeiten werden soll.

Die Funktion akzeptiert außerdem die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.
Durch einen Aufruf wird für ein Ereignis auf einem Ziel ein sogenannter Event-Listener in Form einer Funktion angemeldet.
Jedes Mal wenn das Ereignis auftritt wird die Callback-Funktion aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var informiereMichWennSeiteGeladenIst = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', informiereMichWennSeiteGeladenIst, false);

document.querySelector('body').innerHTML = '<p><a id="link1" href="#">Link 1</a></p>';
var link = document.querySelector('#link1');
var informiereMichWennLinkGeklicktWird = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', informiereMichWennLinkGeklicktWird);

</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten unabhängig davon wo sie stattgefunden haben.
<source lang="javascript">
document.querySelector('body').innerHTML = '<p><a href="#">Link 1</a><br><a href="#">Link 2</a></p>';
var informiereMichWennGeklicktWird = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', informiereMichWennGeklicktWird);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion welche an ein andere Funktion übergeben wird und zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var informiereMichWennMausBewegtWird = function() {
console.log('Benutzer hat geklickt');
};
document.addEventListener('mousemove', informiereMichWennMausBewegtWird);

</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.
<source lang="javascript">
var informiereMichFallsEsOktoberIst = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(informiereMichFallsEsOktoberIst);

</source>

Callback-Mechanismen unterstützen den Umgang mit nicht deterministischen und asynchronen Ereignissen in JavaScript.

===Ereignis-Objekte===

Jeder Event-Listener-Callback-Funktion wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});

</source>

Hinsichtlich der drei Phasen die ein Ereignis durchlaufen kann unterscheidet man zwischen ursprünglichem und aktuellem Ziel.Das aktuelle Ziel ist das auf welchem das Ereignis aktuell ausgelöst wird und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});

</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.<source lang="javascript">

</source>

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein zuvor angemeldeter Event-Listener wieder von einem Objekt entfernt werden.
Diese Funktion benötigt im Gegensatz zu <code>addEventListener</code>nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var loggeMausBewegungen = function(event) {
console.log(event);
};

document.addEventListener('mousemove', loggeMausBewegungen);
document.removeEventListener('mousemove', loggeMausBewegungen);
</source>

===Standardverhalten===

Nachdem alle Ereignisse erzeugt und verarbeitet wurden führt der Browser gegegebenfalls eine sogenannte "Default Action" aus.
Im Wesentlichen ist eine solche Aktion das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt zum Beispiel dazu dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe referenzierte Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird direkt und ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis direkt und ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) komplett durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});

</source>

===mousemove, mouseover, mouseout===
Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten erzeugt.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in das Element eindringt, <code>mouseout</code> wenn das Element wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben auf einem DOM-Element durch den Benutzer werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer einzelnen Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
});
</source>

JavaScript-Tutorium:Browser

2014-11-09T09:12:06Z

Anmize8: /* Abfragen der URL */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren immer zwei unterschiedliche Arten von Objekten und Funktionen.
'''Native Objekte''' werden von der JavaScript-Engine zur Verfügung gestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind hingegen nicht zwingend standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser selbst und externe Geräte.

==HTML5-Standard==

Das bedeuteut, dass obwohl die Sprache selbst dem ECMAScript-Standard folgt, musste man bis vor wenigen Jahren
noch davon ausgehen dass sich die verfügbaren APIs je nach Browser sehr stark unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den allgemein akzeptierten
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation jedoch zunehmend.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox, Chrome und Internet Explorer
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Beim Besuch einer Website lädt der Browser das HTML-Dokument unter der angegeben URL herunter und evaluiert es.
Das Dokument enthält dann wiederum optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code-Blöcke enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten und das Caching des Browser aus,
die enthaltenen Anweisungen und Ausdrücke werden jedoch nicht davon beeinflusst.

'''Anmerkung:'' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist allerdings wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede geladene Web-Seite, unabhängig davon ob sie im separaten Fenster oder als ein weiterer Tab angezeigt wird,
erzeugt der Browser einen separaten und isolierten JavaScript-Kontext, in dem der geladene Code ausgeführt wird.
Das bedeutet dass alle Objekte und Funktionen nur so lange am Leben sind bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten in anderen Fenstern oder Tabs ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Im Browser können einem Fenster beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das automatisch erstellte Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>

</source>

Das oben dargestellte Markup wird bei der Interpretation durch den Browser in folgendes Objektmodell übersetzt:
* Ein <code>html</code>-Knoten mit den Unterknoten <code>head</code> und <code>body</code>
* Ein <code>head</code>-Knoten mit dem Unterknoten <code>title</code>
* Ein <code>title</code>-Knoten mit einem Text-Unterknoten
* Ein <code>body</code>-Knoten mit den Unterknoten <code>p</code> und <code>input</code>
* Ein <code>p</code>-Knoten mit einem Text-Unterknoten und einem Kommentar-Unterknoten
* Ein <code>input</code>-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist klar erkennbar.

===Markup-Korrekturen===

Es ist zu beachten, dass es sich beim Objektmodell '''nicht''' um ein eindeutiges Abbild des originalen Markups handelt.
Der Unterschied wird besonders deutlich wenn man das Resultat von folgendem invalidem HTML untersucht.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>

</source>

Das Objektmodell fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein damit das HTML valide wird.'''Tipp:''' Im Browser kann man das Objektmodell einer Seite mit dem (DOM) Inspector der Entwicklerwerkzeuge betrachten.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen bestimmten numerischen Typen, welcher in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die folgende Liste enthält die gängigsten Typen von Dokumentenknoten denen man bei der Arbeit mit Dokumenten begegnet:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Ein Dokument wird mit dem <code>Document</code>-Konstruktor erzeugt und ist selbst keinem Dokument, jedoch einem Fenster zugeordnet.

<source lang="javascript">
console.log(document.defaultView);
console.log(window == document.defaultView);
</source>

Das Dokument selbst repräsentiert kein HTML-Element, verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe der Funktionen eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.
===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften eines HTML-Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

===Comment-Objekte===

HTML-Kommentare werden in Comment-Objekte umgewandelt welche mit dem <code>Comment</code>-Konstruktor erzeugt werden.

===Text-Objekte===

Texte werden in <code>Text</code>-Objekte umgewandelt, wobei auf diese auch durch übergeordnete Elemente zugegriffen werden kann.
Normalerweise wird bei der Anwendungsprogrammierung mit JavaScript nicht direkt mit Text-Knoten gearbeitet.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Schnittstelle eines <code>Document</code>-Objekts unter der Angabe eines Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem aufgerufenen Dokument als zugehörig markiert durch die Eigenschaft <code>ownerDocument</code>.

<source lang="javascript">

var block = document.createElement('div');
console.log(block.ownerDocument);

</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.
<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);

</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die Suche nach einem eindeutigen Element kann mithilfe einer ID ausgeführt werden, insofern das HTML-Element eine besitzt.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
console.log(inhalt);

</source>

Bei einer Suche wird entweder das Dokument selbst oder aber ein beliebiges Element als Ausgangspunkt verwendet.Es wird dann jeweils immer nur unterhalb des Ausgangsknotens gesucht, was sich positiv auf die Performance auswirken kann.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
var kommentare = inhalt.getElementById('kommentare');

</source>

Werden Elemente einer bestimmten Art gesucht so kann der Tag-Name oder aber die HTML-Klasse als Kriterium genutzt werden.

<source lang="javascript">
var elemente = document.getElementsByTagName('body');
console.log(elemente);

var kommentare = document.getElementsByClassName('kommentar');
console.log(kommentare.length);
</source>

Bei dieser Art von Suche wird eine <code>NodeList</code> als Ergebnis zurückgeliefert, ein Array-artiges Objekt von Node-Elementen.Einzelne Elemente dieser Liste können entweder über eine Funktion oder aber über einen Index abgefragt werden.

<source lang="javascript">
var absaetze = document.getElementsByTagName('p');
console.log(absaetze);
console.log(absaetze.item(0));
console.log(absaetze.item(0) == absaetze[0]);

</source>

===Verweise===
Jedes Element verweist im Sinne einer Baumstruktur auf seine übergeordneten und untergeordneten Knoten und seine Nachbaren.

<source lang="javascript">
var body = document.getElementsByTagName('body').item(0);
for (var i = 0; i < body.childNodes.length; i++) {
console.log(body.childNodes[i]);
}
console.log(body.parentNode);
</source>

Diese Referenzen können genutzt werden um sich durch das Dokument zu bewegen und bestimmte Elemente zu finden.

<source lang="javascript">
var container = [];
var absaetze = document.getElementsByTagName('p');
for (var i = 0; i < absaetze.length; i++) {
container.push(absaetze[i].parentNode);
}
console.log(container);
</source>

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien und Verweisen auf benachbarte Elemente hat gewisse Limitierungen.
Aufgrund dessen enstand durch bekannte Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche heute als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt eine beliebige Menge an Kriterien, die auf ein oder mehrere HTML-Elemente zutrifft.
Der Name wurde so gewählt da CSS-Selektoren ebenso in Stylesheets genutzt werden um eine Menge an Elementen auszuwählen.
Aufgrund der Kombinierbarkeit einzelner CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Im Browser gibt zwei verschiedene Funktionen um Elemente mithilfe von CSS-Selektoren zu suchen:

* <code>document.querySelector</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var inhalt = document.querySelector('#inhalt');
console.log(inhalt);

</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.
<source lang="javascript">
var kommentare = document.querySelectorAll('.kommentar');
console.log(kommentare);

</source>

Mithilfe von eckigen Klammern (<code>[]</code>) werden beliebige Attribute als Kriterium definiert.
<source lang="javascript">
var textFelder = document.querySelectorAll('[type="text"]');
console.log(textFelder);

</source>

Wird kein Attributwert vergeben, wird lediglich auf die Existenz des Attributs geprüft.<source lang="javascript">

var versteckteElemente = document.querySelectorAll('[hidden]');
console.log(versteckteElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var wichtigeKommentare = document.querySelectorAll('.kommentar.wichtig');
console.log(wichtigeKommentare);
var versteckteAbsaetze = document.querySelectorAll('p[hidden]');
console.log(textFelder);

</source>

Es ist sogar möglich Kriterien für übergeordnete Elemente zu definieren indem man die Selektoren durch Leerzeichen trennt.
<source lang="javascript">
var versteckteElementeInnerhalbVonKommentaren = document.querySelectorAll('.kommentar [hidden]');

</source>

'''Anmerkung:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.
'''Anmerkung:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var absatz = document.createElement('p');
document.documentElement.appendChild(absatz);

</source>

Dazu muss immer der künftig übergeordnete Knoten angesprochen werden wenn das Element an einer bestimmten Stelle landen soll.<source lang="javascript">

var absatz = document.querySelector('p');
var unterAbsatz = document.createElement('p');
absatz.appendChild(unterAbsatz);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text===

Ein <code>Element</code>-Objekt mit nur einem <code>Text</code>-Unterknoten stellt seinen Text über der Eigenschaft <code>textContent</code> zur Verfügung.

<source lang="javascript">
var p = document.querySelector('p');
console.log(p.textContent);

</source>

Der Text kann über diese Eigenschaft nicht nur gelesen sondern ebenso beliebig modifiziert werden.
<source lang="javascript">
var p = document.querySelector('p');
p.textContent = 'Hallo Welt';
</source>

===Ändern von HTML===

Eine wesentlich mächtigere Weise um den Inhalt eines Elements zu beeinflussen stellt die Eigenschaft <code>innerHTML</code> dar.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';

</source>

Neben einfachen Text-Änderungen lässt sich mithilfe dieser Eigenschaft das gesamte enthaltene HTML beeinflussen.Anstatt also mithilfe der DOM-Schnittstelle einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';

</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var absatz = document.createElement('p');
absatz.innerHTML = 'Tolle Website!';
absatz.setAttribute('class', 'kommentar');
document.querySelector('body').appendChild(p);

console.log(p.getAttribute('class'));

</source>

Außerdem kann mithilfe der Funktion <code>hasAttribute()</code> nach der Existenz eines Attributs gefragt werden.
<source lang="javascript">
var eingabefeld = document.querySelector('input[type=text]');
console.log('Ist das Eingabefeld Pflicht? ' + eingabefeld.hasAttribute('required'));
</source>

'''Anmerkung:''' Eine besondere Häufigkeit bei Attributsänderungen ist das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var absatz = document.querySelector('p');
absatz.classList.push('wichtig');

</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);

</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';

</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var liste = document.querySelector('ul');
var listenelement = liste.querySelector('li');
liste.removeChild(listenelement);

</source>

'''Anmerkung:''' Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.
<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var listenelement = document.querySelector('li');
entferneKnoten(listenelement);

</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich eine sequentiell ablaufende Folge von Instruktionen.
Ergeben sich Informationen jedoch nicht deterministisch zur Laufzeit bietet sich die ereignisorientierte Programmierung an.
Hierbei wird nicht mehr aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen einzelnen Kontrollfluss, sondern beliebig viele welche sogar auch parallel ablaufen können.

==Ereignisse im Browser==

Bei der Betrachtung von und der Interaktion mit Websites im Browser ergeben sich sehr viele unterschiedliche Ereignisse.
Zunächst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle anderen referenzierten Medien.
Diese Vorgänge lösen bereits nicht deterministische Ereignisse aus welche alleine durch den Browser verursacht werden.
So gibt es für die meisten Medien ein Ereignis welches beschreibt dass diese fertig geladen und gerendert wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse von Seiten des Benutzers eintreten.
Nahezu jede Benutzerinteraktion löst im Browser ein Ereignis aus welches wiederum in weiteren Aktionen resultiert.
Klickt der Benutzer auf einen Link so ist das ein Ereignis welches zur Folge hat dass die geklickte URL geladen wird.
Wird ein Scroll-Balken vom Benutzer bewegt ergibt sich daraus ein Ereignis welches den Browser in Folge scrollen lässt.

Zu den wichtigsten Arten von durch den Benutzer ausgelösten Ereignissen zählen:

* Mausbewegungen und -klicks
* Tastatureingaben
* Scrolling

Eine vollständige Auflistung der möglichen Ereignisse im Browser finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Browser und dem Benutzer gibt es auch andere Auslöser wie zum Beispiel mit der Website verbundene Server/Backends.

==Aufbau eines Ereignisses==

Im Sinne einer standardisierten Ereignisverarbeitung besitzt ein im Browser auftretendes Ereignis immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Regel in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Objekt mit einer pro Ereignis festgelegten Struktur, welches die wichtigsten Ereignisdaten enthält
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis festgelegt wird; in der Regel handelt es sich um DOM-Elemente

Beispiel für ein solches Ereignis: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der sogenannten '''Capturing-Phase''' wird zuerst ein Ereignis mit dem obersten Knoten im Dokument als Ziel erzeugt.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere DOM-Objekte als Unterknoten enthält.
Das wird schrittweise wiederholt für jeden untergeordneten Knoten auf dem Pfad zum eigentlichen Ziel des Ereignisses.

<source lang="javascript">
+ window (optional) - Ereignis mit window als aktueller Ziel
+ document - Ereignis mit body als aktueller Ziel
+ body - Ereignis mit body als aktueller Ziel
+ p (ursprüngliches Ziel)
</source>

'''Anmerkung:''' Bei manchen Ereignissen wird das <code>window</code>-Objekt als oberstes Objekt in die Hierarchie der Ziele mit aufgenommen.

===Target-Phase===

Ist der Browser nun beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis erzeugt, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis erzeugt.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Die Capturing- und Bubbling-Phasen bilden in ihrer Implementierung die Tatsache ab dass
wenn ein Ereignis auf einem Element stattfindet, dieses Ereignis ebenso für das Element umgebende Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird dieser auch in einer Stadt geboren, in einem Land geboren.

Einer der beiden oben beschriebenen Phasen wäre allerdings vollkommen ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Implementierungen der Browser-Hersteller existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis "DOMContentLoaded" beschreibt, dass eine Seite abgesehen siner externen Medien fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses welches verarbeiten werden soll.

Die Funktion akzeptiert außerdem die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.
Durch einen Aufruf wird für ein Ereignis auf einem Ziel ein sogenannter Event-Listener in Form einer Funktion angemeldet.
Jedes Mal wenn das Ereignis auftritt wird die Callback-Funktion aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var informiereMichWennSeiteGeladenIst = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', informiereMichWennSeiteGeladenIst, false);

document.querySelector('body').innerHTML = '<p><a id="link1" href="#">Link 1</a></p>';
var link = document.querySelector('#link1');
var informiereMichWennLinkGeklicktWird = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', informiereMichWennLinkGeklicktWird);

</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten unabhängig davon wo sie stattgefunden haben.
<source lang="javascript">
document.querySelector('body').innerHTML = '<p><a href="#">Link 1</a><br><a href="#">Link 2</a></p>';
var informiereMichWennGeklicktWird = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', informiereMichWennGeklicktWird);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion welche an ein andere Funktion übergeben wird und zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var informiereMichWennMausBewegtWird = function() {
console.log('Benutzer hat geklickt');
};
document.addEventListener('mousemove', informiereMichWennMausBewegtWird);

</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.
<source lang="javascript">
var informiereMichFallsEsOktoberIst = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(informiereMichFallsEsOktoberIst);

</source>

Callback-Mechanismen unterstützen den Umgang mit nicht deterministischen und asynchronen Ereignissen in JavaScript.

===Ereignis-Objekte===

Jeder Event-Listener-Callback-Funktion wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});

</source>

Hinsichtlich der drei Phasen die ein Ereignis durchlaufen kann unterscheidet man zwischen ursprünglichem und aktuellem Ziel.Das aktuelle Ziel ist das auf welchem das Ereignis aktuell ausgelöst wird und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});

</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.<source lang="javascript">

</source>

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein zuvor angemeldeter Event-Listener wieder von einem Objekt entfernt werden.
Diese Funktion benötigt im Gegensatz zu <code>addEventListener</code>nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var loggeMausBewegungen = function(event) {
console.log(event);
};

document.addEventListener('mousemove', loggeMausBewegungen);
document.removeEventListener('mousemove', loggeMausBewegungen);
</source>

===Standardverhalten===

Nachdem alle Ereignisse erzeugt und verarbeitet wurden führt der Browser gegegebenfalls eine sogenannte "Default Action" aus.
Im Wesentlichen ist eine solche Aktion das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt zum Beispiel dazu dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe referenzierte Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird direkt und ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis direkt und ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) komplett durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});

</source>

===mousemove, mouseover, mouseout===
Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten erzeugt.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in das Element eindringt, <code>mouseout</code> wenn das Element wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben auf einem DOM-Element durch den Benutzer werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer einzelnen Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
});
</source>

JavaScript-Tutorium:Browser

2014-11-09T09:11:31Z

Anmize8: /* Erstellen von Elementen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren immer zwei unterschiedliche Arten von Objekten und Funktionen.
'''Native Objekte''' werden von der JavaScript-Engine zur Verfügung gestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind hingegen nicht zwingend standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser selbst und externe Geräte.

==HTML5-Standard==

Das bedeuteut, dass obwohl die Sprache selbst dem ECMAScript-Standard folgt, musste man bis vor wenigen Jahren
noch davon ausgehen dass sich die verfügbaren APIs je nach Browser sehr stark unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den allgemein akzeptierten
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation jedoch zunehmend.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox, Chrome und Internet Explorer
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Beim Besuch einer Website lädt der Browser das HTML-Dokument unter der angegeben URL herunter und evaluiert es.
Das Dokument enthält dann wiederum optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code-Blöcke enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten und das Caching des Browser aus,
die enthaltenen Anweisungen und Ausdrücke werden jedoch nicht davon beeinflusst.

'''Anmerkung:'' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist allerdings wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede geladene Web-Seite, unabhängig davon ob sie im separaten Fenster oder als ein weiterer Tab angezeigt wird,
erzeugt der Browser einen separaten und isolierten JavaScript-Kontext, in dem der geladene Code ausgeführt wird.
Das bedeutet dass alle Objekte und Funktionen nur so lange am Leben sind bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten in anderen Fenstern oder Tabs ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString()
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Im Browser können einem Fenster beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das automatisch erstellte Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>

</source>

Das oben dargestellte Markup wird bei der Interpretation durch den Browser in folgendes Objektmodell übersetzt:
* Ein <code>html</code>-Knoten mit den Unterknoten <code>head</code> und <code>body</code>
* Ein <code>head</code>-Knoten mit dem Unterknoten <code>title</code>
* Ein <code>title</code>-Knoten mit einem Text-Unterknoten
* Ein <code>body</code>-Knoten mit den Unterknoten <code>p</code> und <code>input</code>
* Ein <code>p</code>-Knoten mit einem Text-Unterknoten und einem Kommentar-Unterknoten
* Ein <code>input</code>-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist klar erkennbar.

===Markup-Korrekturen===

Es ist zu beachten, dass es sich beim Objektmodell '''nicht''' um ein eindeutiges Abbild des originalen Markups handelt.
Der Unterschied wird besonders deutlich wenn man das Resultat von folgendem invalidem HTML untersucht.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>

</source>

Das Objektmodell fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein damit das HTML valide wird.'''Tipp:''' Im Browser kann man das Objektmodell einer Seite mit dem (DOM) Inspector der Entwicklerwerkzeuge betrachten.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen bestimmten numerischen Typen, welcher in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die folgende Liste enthält die gängigsten Typen von Dokumentenknoten denen man bei der Arbeit mit Dokumenten begegnet:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Ein Dokument wird mit dem <code>Document</code>-Konstruktor erzeugt und ist selbst keinem Dokument, jedoch einem Fenster zugeordnet.

<source lang="javascript">
console.log(document.defaultView);
console.log(window == document.defaultView);
</source>

Das Dokument selbst repräsentiert kein HTML-Element, verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe der Funktionen eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.
===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften eines HTML-Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

===Comment-Objekte===

HTML-Kommentare werden in Comment-Objekte umgewandelt welche mit dem <code>Comment</code>-Konstruktor erzeugt werden.

===Text-Objekte===

Texte werden in <code>Text</code>-Objekte umgewandelt, wobei auf diese auch durch übergeordnete Elemente zugegriffen werden kann.
Normalerweise wird bei der Anwendungsprogrammierung mit JavaScript nicht direkt mit Text-Knoten gearbeitet.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Schnittstelle eines <code>Document</code>-Objekts unter der Angabe eines Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem aufgerufenen Dokument als zugehörig markiert durch die Eigenschaft <code>ownerDocument</code>.

<source lang="javascript">

var block = document.createElement('div');
console.log(block.ownerDocument);

</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.
<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);

</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die Suche nach einem eindeutigen Element kann mithilfe einer ID ausgeführt werden, insofern das HTML-Element eine besitzt.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
console.log(inhalt);

</source>

Bei einer Suche wird entweder das Dokument selbst oder aber ein beliebiges Element als Ausgangspunkt verwendet.Es wird dann jeweils immer nur unterhalb des Ausgangsknotens gesucht, was sich positiv auf die Performance auswirken kann.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
var kommentare = inhalt.getElementById('kommentare');

</source>

Werden Elemente einer bestimmten Art gesucht so kann der Tag-Name oder aber die HTML-Klasse als Kriterium genutzt werden.

<source lang="javascript">
var elemente = document.getElementsByTagName('body');
console.log(elemente);

var kommentare = document.getElementsByClassName('kommentar');
console.log(kommentare.length);
</source>

Bei dieser Art von Suche wird eine <code>NodeList</code> als Ergebnis zurückgeliefert, ein Array-artiges Objekt von Node-Elementen.Einzelne Elemente dieser Liste können entweder über eine Funktion oder aber über einen Index abgefragt werden.

<source lang="javascript">
var absaetze = document.getElementsByTagName('p');
console.log(absaetze);
console.log(absaetze.item(0));
console.log(absaetze.item(0) == absaetze[0]);

</source>

===Verweise===
Jedes Element verweist im Sinne einer Baumstruktur auf seine übergeordneten und untergeordneten Knoten und seine Nachbaren.

<source lang="javascript">
var body = document.getElementsByTagName('body').item(0);
for (var i = 0; i < body.childNodes.length; i++) {
console.log(body.childNodes[i]);
}
console.log(body.parentNode);
</source>

Diese Referenzen können genutzt werden um sich durch das Dokument zu bewegen und bestimmte Elemente zu finden.

<source lang="javascript">
var container = [];
var absaetze = document.getElementsByTagName('p');
for (var i = 0; i < absaetze.length; i++) {
container.push(absaetze[i].parentNode);
}
console.log(container);
</source>

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien und Verweisen auf benachbarte Elemente hat gewisse Limitierungen.
Aufgrund dessen enstand durch bekannte Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche heute als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt eine beliebige Menge an Kriterien, die auf ein oder mehrere HTML-Elemente zutrifft.
Der Name wurde so gewählt da CSS-Selektoren ebenso in Stylesheets genutzt werden um eine Menge an Elementen auszuwählen.
Aufgrund der Kombinierbarkeit einzelner CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Im Browser gibt zwei verschiedene Funktionen um Elemente mithilfe von CSS-Selektoren zu suchen:

* <code>document.querySelector</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var inhalt = document.querySelector('#inhalt');
console.log(inhalt);

</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.
<source lang="javascript">
var kommentare = document.querySelectorAll('.kommentar');
console.log(kommentare);

</source>

Mithilfe von eckigen Klammern (<code>[]</code>) werden beliebige Attribute als Kriterium definiert.
<source lang="javascript">
var textFelder = document.querySelectorAll('[type="text"]');
console.log(textFelder);

</source>

Wird kein Attributwert vergeben, wird lediglich auf die Existenz des Attributs geprüft.<source lang="javascript">

var versteckteElemente = document.querySelectorAll('[hidden]');
console.log(versteckteElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var wichtigeKommentare = document.querySelectorAll('.kommentar.wichtig');
console.log(wichtigeKommentare);
var versteckteAbsaetze = document.querySelectorAll('p[hidden]');
console.log(textFelder);

</source>

Es ist sogar möglich Kriterien für übergeordnete Elemente zu definieren indem man die Selektoren durch Leerzeichen trennt.
<source lang="javascript">
var versteckteElementeInnerhalbVonKommentaren = document.querySelectorAll('.kommentar [hidden]');

</source>

'''Anmerkung:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.
'''Anmerkung:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var absatz = document.createElement('p');
document.documentElement.appendChild(absatz);

</source>

Dazu muss immer der künftig übergeordnete Knoten angesprochen werden wenn das Element an einer bestimmten Stelle landen soll.<source lang="javascript">

var absatz = document.querySelector('p');
var unterAbsatz = document.createElement('p');
absatz.appendChild(unterAbsatz);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text===

Ein <code>Element</code>-Objekt mit nur einem <code>Text</code>-Unterknoten stellt seinen Text über der Eigenschaft <code>textContent</code> zur Verfügung.

<source lang="javascript">
var p = document.querySelector('p');
console.log(p.textContent);

</source>

Der Text kann über diese Eigenschaft nicht nur gelesen sondern ebenso beliebig modifiziert werden.
<source lang="javascript">
var p = document.querySelector('p');
p.textContent = 'Hallo Welt';
</source>

===Ändern von HTML===

Eine wesentlich mächtigere Weise um den Inhalt eines Elements zu beeinflussen stellt die Eigenschaft <code>innerHTML</code> dar.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';

</source>

Neben einfachen Text-Änderungen lässt sich mithilfe dieser Eigenschaft das gesamte enthaltene HTML beeinflussen.Anstatt also mithilfe der DOM-Schnittstelle einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';

</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var absatz = document.createElement('p');
absatz.innerHTML = 'Tolle Website!';
absatz.setAttribute('class', 'kommentar');
document.querySelector('body').appendChild(p);

console.log(p.getAttribute('class'));

</source>

Außerdem kann mithilfe der Funktion <code>hasAttribute()</code> nach der Existenz eines Attributs gefragt werden.
<source lang="javascript">
var eingabefeld = document.querySelector('input[type=text]');
console.log('Ist das Eingabefeld Pflicht? ' + eingabefeld.hasAttribute('required'));
</source>

'''Anmerkung:''' Eine besondere Häufigkeit bei Attributsänderungen ist das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var absatz = document.querySelector('p');
absatz.classList.push('wichtig');

</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);

</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';

</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var liste = document.querySelector('ul');
var listenelement = liste.querySelector('li');
liste.removeChild(listenelement);

</source>

'''Anmerkung:''' Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.
<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var listenelement = document.querySelector('li');
entferneKnoten(listenelement);

</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich eine sequentiell ablaufende Folge von Instruktionen.
Ergeben sich Informationen jedoch nicht deterministisch zur Laufzeit bietet sich die ereignisorientierte Programmierung an.
Hierbei wird nicht mehr aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen einzelnen Kontrollfluss, sondern beliebig viele welche sogar auch parallel ablaufen können.

==Ereignisse im Browser==

Bei der Betrachtung von und der Interaktion mit Websites im Browser ergeben sich sehr viele unterschiedliche Ereignisse.
Zunächst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle anderen referenzierten Medien.
Diese Vorgänge lösen bereits nicht deterministische Ereignisse aus welche alleine durch den Browser verursacht werden.
So gibt es für die meisten Medien ein Ereignis welches beschreibt dass diese fertig geladen und gerendert wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse von Seiten des Benutzers eintreten.
Nahezu jede Benutzerinteraktion löst im Browser ein Ereignis aus welches wiederum in weiteren Aktionen resultiert.
Klickt der Benutzer auf einen Link so ist das ein Ereignis welches zur Folge hat dass die geklickte URL geladen wird.
Wird ein Scroll-Balken vom Benutzer bewegt ergibt sich daraus ein Ereignis welches den Browser in Folge scrollen lässt.

Zu den wichtigsten Arten von durch den Benutzer ausgelösten Ereignissen zählen:

* Mausbewegungen und -klicks
* Tastatureingaben
* Scrolling

Eine vollständige Auflistung der möglichen Ereignisse im Browser finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Browser und dem Benutzer gibt es auch andere Auslöser wie zum Beispiel mit der Website verbundene Server/Backends.

==Aufbau eines Ereignisses==

Im Sinne einer standardisierten Ereignisverarbeitung besitzt ein im Browser auftretendes Ereignis immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Regel in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Objekt mit einer pro Ereignis festgelegten Struktur, welches die wichtigsten Ereignisdaten enthält
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis festgelegt wird; in der Regel handelt es sich um DOM-Elemente

Beispiel für ein solches Ereignis: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der sogenannten '''Capturing-Phase''' wird zuerst ein Ereignis mit dem obersten Knoten im Dokument als Ziel erzeugt.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere DOM-Objekte als Unterknoten enthält.
Das wird schrittweise wiederholt für jeden untergeordneten Knoten auf dem Pfad zum eigentlichen Ziel des Ereignisses.

<source lang="javascript">
+ window (optional) - Ereignis mit window als aktueller Ziel
+ document - Ereignis mit body als aktueller Ziel
+ body - Ereignis mit body als aktueller Ziel
+ p (ursprüngliches Ziel)
</source>

'''Anmerkung:''' Bei manchen Ereignissen wird das <code>window</code>-Objekt als oberstes Objekt in die Hierarchie der Ziele mit aufgenommen.

===Target-Phase===

Ist der Browser nun beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis erzeugt, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis erzeugt.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Die Capturing- und Bubbling-Phasen bilden in ihrer Implementierung die Tatsache ab dass
wenn ein Ereignis auf einem Element stattfindet, dieses Ereignis ebenso für das Element umgebende Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird dieser auch in einer Stadt geboren, in einem Land geboren.

Einer der beiden oben beschriebenen Phasen wäre allerdings vollkommen ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Implementierungen der Browser-Hersteller existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis "DOMContentLoaded" beschreibt, dass eine Seite abgesehen siner externen Medien fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses welches verarbeiten werden soll.

Die Funktion akzeptiert außerdem die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.
Durch einen Aufruf wird für ein Ereignis auf einem Ziel ein sogenannter Event-Listener in Form einer Funktion angemeldet.
Jedes Mal wenn das Ereignis auftritt wird die Callback-Funktion aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var informiereMichWennSeiteGeladenIst = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', informiereMichWennSeiteGeladenIst, false);

document.querySelector('body').innerHTML = '<p><a id="link1" href="#">Link 1</a></p>';
var link = document.querySelector('#link1');
var informiereMichWennLinkGeklicktWird = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', informiereMichWennLinkGeklicktWird);

</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten unabhängig davon wo sie stattgefunden haben.
<source lang="javascript">
document.querySelector('body').innerHTML = '<p><a href="#">Link 1</a><br><a href="#">Link 2</a></p>';
var informiereMichWennGeklicktWird = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', informiereMichWennGeklicktWird);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion welche an ein andere Funktion übergeben wird und zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var informiereMichWennMausBewegtWird = function() {
console.log('Benutzer hat geklickt');
};
document.addEventListener('mousemove', informiereMichWennMausBewegtWird);

</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.
<source lang="javascript">
var informiereMichFallsEsOktoberIst = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(informiereMichFallsEsOktoberIst);

</source>

Callback-Mechanismen unterstützen den Umgang mit nicht deterministischen und asynchronen Ereignissen in JavaScript.

===Ereignis-Objekte===

Jeder Event-Listener-Callback-Funktion wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});

</source>

Hinsichtlich der drei Phasen die ein Ereignis durchlaufen kann unterscheidet man zwischen ursprünglichem und aktuellem Ziel.Das aktuelle Ziel ist das auf welchem das Ereignis aktuell ausgelöst wird und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});

</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.<source lang="javascript">

</source>

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein zuvor angemeldeter Event-Listener wieder von einem Objekt entfernt werden.
Diese Funktion benötigt im Gegensatz zu <code>addEventListener</code>nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var loggeMausBewegungen = function(event) {
console.log(event);
};

document.addEventListener('mousemove', loggeMausBewegungen);
document.removeEventListener('mousemove', loggeMausBewegungen);
</source>

===Standardverhalten===

Nachdem alle Ereignisse erzeugt und verarbeitet wurden führt der Browser gegegebenfalls eine sogenannte "Default Action" aus.
Im Wesentlichen ist eine solche Aktion das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt zum Beispiel dazu dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe referenzierte Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird direkt und ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis direkt und ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) komplett durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});

</source>

===mousemove, mouseover, mouseout===
Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten erzeugt.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in das Element eindringt, <code>mouseout</code> wenn das Element wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben auf einem DOM-Element durch den Benutzer werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer einzelnen Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
});
</source>