Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 1 - Textknoten bearbeiten

1. Die Abschnitte

2. Das Datum im Copyright

... ist diesmal das Objekt der Begierde. Denn da steht noch immer 2007 drin, wir wollen aber das aktuelle Jahr haben. Gut, machen wir diesmal clientseitig mit JavaScript, ist auch nicht so wichtig. Hier will ja nur was zeigen. Als Erstes schauen wir uns mal die Struktur an. 


<div id="copyright">
  <p>Copyright <strong>2007</strong> by Peter Kropff</p>
</div>

Wir haben einen Absatz mit drei Kindknoten, zwei Text- und einem Elementknoten. Letzteren wollen wir diesmal verändern. Und da wir schon des Öfteren mit getElementByTagName gearbeitet haben, machen wir das diesmal auf eine andere Art und Weise. Und zwar in der Methode changeText.

3. Der Absatz

Den holen wir uns auf die übliche Art. Und den Code werde ich nun wirklich nicht mehr erklären, das haben wir in diesem Tutorial schon zigmal durchexerziert. 


function changeText()
{
  var div = document.getElementById('copyright');
  var p   = div.firstChild;
  if (3 == p.nodeType)
  {
    p = p.nextSibling;
  }  
}

4. Die Schleife

Als erstes müssen wir die Länge der Schleife ermitteln. Das geschieht mit childNodes. Dabei werden alle Kindelemente in einem Array abgespeichert und die Anzahl der Einträge legt dann die Dauer der Schleife fest. 


function changeText()
{
  ...
  childs = p.childNodes;
  for (i = 0; i < childs.length; i++)
  {
    ...
  }
}

Das strong-Element

Um das zu bekommen, arbeiten wir mit dem nun hinlänglich bekannten nodeType. Dabei gehen wir einfach mal davon aus, dass das Datum im ersten Elementknoten des zuvor ausgewählten Absatzes steckt. 


for (i = 0; i < childs.length; i++)
{
  if (1 == childs[i].nodeType)
  {
    ..
  }
}

Das Datum

... zu ändern, ist jetzt ein Kinderspiel. Dazu benötigen wir den folgenden Code. 


if (1 == childs[i].nodeType)
{
  var datum  = new Date ();  
  var jahr   = datum.getFullYear();
  var str    = childs[i].firstChild;
  var inhalt = str.nodeValue;
  str.replaceData(0, inhalt.length, jahr);
  break;
}

Erläuterung

Um nun das (clientseitige) Jahr zu ermitteln, müssen wir mit var datum = new Date(); Objekt vom Type Date erzeugen. Und die vierstellige(!) Jahresangabe bekommen wir mir var jahr = datum.getFullYear();.

Dann erstellen wir eine Referenz auf den Textknoten (var str = childs[i].firstChild;). Ja richtig! Der Inhalt, also die "2007" ist ein Knoten. Und den eigentlichen Inhalt holen wir uns mittels var inhalt = str.nodeValue;.

Zum Abschluss müssen wir dann den Inhalt nur durch replaceData austauschen. Dabei benötigen wir drei Parameter. Der erste ist die Stelle, wo wir anfangen wollen, der zweite die Anzahl von zu ersetzenden Zeichen (inhalt.length) und der dritte steht für den einzufügenden Text.

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