Hauptmenü

Untermenü

DOM-Manipulation - Textknoten

1. createTextNode

Um nun einen Textknoten zu erzeugen, bietet uns bereits das document-Objekt eine entsprechende Methode dazu an. Aber genau wie beim createElement erzeugt man damit nur einen Verweis, den man dann über das node-Objekt und der entsprechenden Methode einhängen muss:


<div id="rahmen"></div>
...
texti document.createTextNode('Jodelblah');
document.getElementById('rahmen').appendChild (texti);

2. nodeValue

Dies ist die zentrale Eigenschaft(!), um Inhalte aus Text- oder Attributknoten auszulesen. Da es hier aber um Erstere geht, werde ich die Sache mit Letzteren erst mal ignorieren. Bei nodeValue handelt es sich nur um den reinen Inhalt. Texte sind aber normalerweise Knoten. Also muss der Zugriff über firstChild erfolgen, um das erste Element eines Textknotens zu erfassen.


<div id="rahmen">bla blubb</div>
...
rahmi document.getElementById('rahmen');
alert (rahmi.firstChild.nodeValue);

3. Die machwasData-Methoden

... beziehen sich teilweise auch auf Attributknoten, was das Verständnis anfangs ein wenig erschwert. Warum man das gemacht hat? Keine Ahnung, fragt die Leute, die für diese Spezifikation verantwortlich sind. Darum werde ich hier bei der Theorie erst mal nur auf die Verwendung bei Textknoten eingehen, da ich die folgenden Methoden ehrlich gesagt noch nie bei Attributen eingesetzt habe.

appendData

Hängt den Inhalt/Wert eines Text-/Attributknotens in ein bereits existierendes Element am Ende ein. Bereits bestehende Werte werden dabei nicht überschrieben.


<div id="rahmen">bla blubb </div>
...
rahmi document.getElementById('rahmen'); 
texti document.createTextNode('Jodelblah');
rahmi.firstChild.appendData (texti.nodeValue);

Erläuterung

Letztendlich bewirkt dieser Code dasselbe wie der ganz oben. Nur halt wesentlich komplizierter. Die ersten zwei Zeilen JavaScript-Code sollten wohl klar sein. Wichtig ist nur die dritte, rahmi.firstChild.appendData (texti.nodeValue);. Die Besonderheit von appendData liegt darin, dass man nur reinen Text(!) damit einfügen kann, während texti aber die Referenz auf einen Textknoten ist. Also muss man aus letzterem per nodeValue selbigen (also den Text) extrahieren.

deleteData

Löscht einen bestimmten Teil eines Textknotens. Dafür benötigt man zwei Parameter. Der erste stellt die Startposition dar und der zweite die Anzahl von Zeichen, die entfernt werden sollen. Beim folgenden Beispiel wird der gesamte Text gelöscht.


<div id="rahmen">bla blubb jodelblah</div>
...
rahmi document.getElementById('rahmen');
alle document.getElementById('rahmen').firstChild.nodeValue.length;
rahmi.firstChild.deleteData (0alle);

insertData

Fügt weiteren Text in einen bestehenden Textknoten ein. Dabei bleibt der vorherige Inhalt erhalten. Auch diese Methode erwartet zwei Parameter. Der erste bestimmt den Einfügepunkt, der zweite ist der einzufügende Inhalt.


<div id="rahmen">bla blubb</div>
...
rahmi document.getElementById('rahmen');
rahmi.firstChild.insertData (4' kräh bla schwall ');

replaceData

Damit können Inhalte eines Textknotens durch andere ersetzt werden. Im Gegensatz zu den beiden vorherigen Methoden benötigt diese logischerweise drei Parameter. Erstens die Startposition des zu ersetzenden Inhalts, dann die Anzahl der Zeichen und zu guter Letzt den neuen Text.


<div id="rahmen">bla blubb jodelblah</div>
...
rahmi document.getElementById('rahmen');
rahmi.firstChild.replaceData (45'laber');

4. data

Damit kann man den Inhalt eines Textknotens zwischenspeichern, um ihn später weiter zu verwenden. Im Gegensatz zu nodeValue gilt das aber ausschließlich für Texte.


<div id="rahmen">bla blubb jodelblah</div>
...
rahmi document.getElementById('rahmen');
speicher rahmi.firstChild.data;

Natürlich kann man damit ebenfalls den Inhalt verändern, da data auch Schreibrechte hat.


<div id="rahmen">bla blubb jodelblah</div>
...
rahmi document.getElementById('rahmen');
rahmi.firstChild.data 'Schwall laber';

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt