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 (0, alle);
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 (4, 5, '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