zurück weiter zur letzten Aufgabe

Tiefer in die Programmierung mit Java-Script

1. Der Befehl: firstChild.nodeValue

Fahre mit der Maus über diesen Text!

Einen ganz mächtigen, weil vielseitig nutzbaren Befehl hast du schon kennen gelernt: getElementById(' '). heißt er. Hinter dem Punkt folgen dann weitere Befehle wie align, value etc.

Leider hat dieser Befehl einen Haken: Du kannst nur die Befehle anhängen, die für den Html-TAG, in dem die ID steht, gültig sind. Ein Beispiel:

Du hast dem TAG <p> die ID "Richtung" gegeben so sieht's aus, weil du die Anordnung dieses Absatzes beeinflussbar machen willst (wie in Datei "17getelementbyid.html"). Dann kannst du in der Funktion, die du mit einem Button aufrufst, über getElementById('').align = center den Absatz auf "zentriert" verschieben.

Gibst du aber diesem Befehl getElementById(''). den Anhang value = 'irgendein Text', passiert gar nichts, weil der Html-TAG <p> nun mal das Attribut value nicht kennt. so würde es aussehen.

Ich möchte aber den Text in diesem Absatz auf Befehl ändern!!! Was tun?

1. Arbeit im head!!

Wenn du alles richtig gemacht hast, müsste sich jetzt auf Knopfdruck der Text Fahre mit der Maus über diesen Text! in Du siehst: ein anderer Text! umgewandelt haben.

wie bekommen wir nun den ursprünglichen Text zurück?
Ich habe mich hier für das onMouseOut=""-Attribut entschieden.

Der Trick, das der Text auf das Berühren/Überstreichen mit der Maus reagiert, kommt jetzt:

Wenn Du den Aufbau der beiden "Befehlsauslöser" button-TAG und p-TAG vergleichst, siehst du, dass sie nahezu gleich aussehen. Lediglich tauscht du onClick="" in <button> gegen onMouseOver="" in <p> aus.

Hier noch einmal die beiden TAGS untereinander zum Vergleich:

<buttononClick="andererText('Du siehst: ein anderer Text!')"onMouseOut="andererText('Fahre mit der Maus über diesen Text!')">Oder klick hier!</button>
<ponMouseOver="andererText('Du siehst: ein anderer Text!')"onMouseOut="andererText('Fahre mit der Maus über diesen Text!')">Fahre mit der Maus über diesen Text!</p>

Du hast hier eine Erweiterung des Java-Script Modells kennen gelernt:

  1. Jeder Html-TAG gilt als Knoten.
  2. Jeder Knoten hat abhängige "Kinder" = child.
  3. child ist alles, was bis zum nächsten Html-TAG folgt.

Merkwürdiges: Wenn du in der Funktion bei document.getElementById('Text').firstChild.nodeValue = neuerText das Ende nodeValue durch data ersetzt, funktioniert das Ganze genauso. Inwieweit dieser Befehl allerdings bei allen Html-Befehlen, die Text umschließen, funktioniert, habe ich noch nicht durchgespielt.

Willst du mehr wissen? Hier1

2. Der Befehl: innerHTML

Es gibt aber auch nioch eine 2. Möglichkeit, dynamisch (so heißt das Austauschen von HTML-Elementen) Text zu verändern.

Ersetze in unserer Funktion andererTest() den Befehlsteil firstChild.nodeValue durch innerHTML! (Achte auf die Klein-/Großschreibung!)

Probiere die Funktion aus: Du siehst, dieser Teil-Befehl erfüllt denselben Zweck.

Dieser Teil-Befehl hat aber noch einen Vorteil: Du kannst innerhalb des Ersatztextes Html-Formatierungen einsetzen!
Das heißt: Wenn du in unseren Beispiel-Ersatztext Du siehst: ein anderer Text das Wort "anderer" z. B. mit <u>anderer</> umgibst, ist das Wort beim Austausch unterstrichen.
Probiere das aus und ersetzte innerHTML probehalber wieder durch firstChild.Value.

Du siehst, innerHTML hat also seine Stärken!

Auf der anderen Seite hat aber firstCild.node... ander Stärken. Du kannst damit ganze Html-Befehle austauschen.
Aber das führt hier zu weit.


1 http://de.selfHtml.org/javascript/objekte/node.htm

zurück weiter zur letzten Aufgabe