firstChild, - childNodes, - nodesValue
In den vorhergehenden Beispielen haben Sie schon gesehen,
dass Texte eines Absatzes geändert wurden.
Das möchte ich nun noch etwas vertiefen.
Um auf das Textelement eines Elementknotens zugreifen zu
können,
gibt es die Möglichkeit, den Inhalt des Textknotens, also den Text selbst,
sowohl zu lesen wie auch neu zu schreiben.
Wichtig dabei ist das Verständnis über die Verschachtelung der Knoten.
Sehen wir uns folgendes Beispiel an:
<p id="ab1">Heute ist ein sehr warmer
Tag!"</p>
Mit ID="ab1" ordne ich dem Absatz eine genaue Bezeichnung zu.
In einer JavaScript Routine schaffe ich jetzt als erstes den Zugriff auf das
Element.
elem=document.getElementById("ab1");
wie in den vorhergehenden Kapiteln gezeigt.
Wir erinnern uns, <p>=der Elementknoten, der Text ist
im obigen Fall ein Textknoten und
zugleich der erste Kindknoten. Auf den Textknoten kann ich jetzt lesend wie auch
schreibend zugreifen.
1. lesend: alert(elem.firstChild.nodesValue);
2. schreibend: elem.firstChild.nodesValue="neuer Text";
firstChild bedeutet den ersten Kindknoten des Elements,
nodesValue bedeutet den Inhalt des Kindknoten bearbeiten.
Wie Sie ja in den Knotenbeschreibungen gesehen haben, können
Elemente auch mehrere Kindknoten haben.
Dann ist firstChild nicht mehr geeignet.
Als Abhilfe steht die Anweisung: childNodes[index] zur Verfügung.
Folgende Zeilen eines Absatzes sollen geändert werden:
<p>Text in Zeile 1<br>Text in Zeile 2<br>Text in Zeile 3</p>
Es ergibt sich die Knotenaufteilung:
<p id="ab1">
= Elementknoten
Text in Zeile 1 = erster Kindknoten
<br>
= zweiter Kindknoten
Text in Zeile 2 = dritter Kindknoten
<br>
= vierter Kindknoten
Text in Zeile 3 = fünfter Kindknoten
Der Zugriff auf die einzelnen Zeilen sieht so aus:
elem=getElementById("ab1");
elem.childNodes[0].nodesValue="Neuer Text Zeile 1";
elem.childNodes[2].nodesValue="Neuer Text Zeile 2";
elem.childNodes[4].nodesValue="Neuer Text Zeile 3";
Hier ein komplettes Beispiel: (Klick mich um das Beispiel zu starten)
<html>
<head>
<title>Praxis2</title>
<script type="text/javaScript">
function init() 'wird beim Laden
des Dokuments ausgeführt
{
elem=document.getElementById("ab1");
'Zugriff auf den Absatz mit der ID="ab1"
schaffen
n1="Das ist der Text der ersten, neuen Zeile"; 'neuen
Text Zeile 1 in Variable speichern
n2="das ist der Text der neuen zweiten Zeile"; 'neuen
Text Zeile 2 in Variable speichern
n3="und schließlich eine neue, dritte Zeile"; 'neuen
Text Zeile 3 in Variable speichern
alt1=elem.childNodes[0].nodeValue; 'Ursprüngliche
Zeile 1 sichern
alt2=elem.childNodes[2].nodeValue; 'Ursprüngliche
Zeile 2 sichern
alt3=elem.childNodes[4].nodeValue; 'Ursprüngliche
Zeile 3 sichern
}
function ausgabe(a)
{
if (a==1) 'Falls die Maus
den Text berührt,
{
elem.childNodes[0].nodeValue=n1;
'Neue Zeile 1 schreiben
elem.childNodes[2].nodeValue=n2;
'Neue Zeile 2 schreiben
elem.childNodes[4].nodeValue=n3;
'Neue Zeile 3 schreiben
}
if (a==0) 'Falls die Maus
den Text verläßt
{
elem.childNodes[0].nodeValue=alt1;
'Alte Zeile 1 wider herstellen
elem.childNodes[2].nodeValue=alt2;
'Alte Zeile 1 wider herstellen
elem.childNodes[4].nodeValue=alt3;
'Alte Zeile 1 wider herstellen
}
}
function raus()
{
window.close(); 'Das
Fenster schließen
}
</script>
</head>
<body onLoad="init()">
<p id="ab1">Das sind Zeilen in einem Absatz.<br>
Diese Zeilen sollen nun vom Inhalt her<br>
komplett umgeschrieben werden.</p>
<p> </p>
<p onMouseOver="ausgabe(1)" onMouseOut="ausgabe(0)">
<font color="#0000FF"><b>Berühr mich mit der Maus und der Text oben wird geändert.</b></font></p>
<p> </p>
<p onClick="raus()"><font color="#FF0000"><b>Fenster schließen</b></font></p>
</body>
</html>