DOM-Manipulation JavaScript - Praxistutorial 1 - Listenelemente verändern

1. Die Abschnitte

2. Die Methodenliste

Jetzt wollen wir uns mal der Links annehmen, die die bisherigen zwei Aktionen auslösen. Das machen wir diesmal in der Methode changeList. Dabei wollen wir getList komplett entfernen und bei setList nur den Linkknoten entfernen, den Text aber behalten. Allerdings soll dies nur geschehen, wenn vorher auf setList geklickt wurde. Aber dafür haben wir ja im vorherigen Abschnitt eine entsprechende Variable definiert, so dass der erste Schritt ganz einfach ist (und bitte alles Weitere in diese Bedingung packen).


function changeList ()
{
  if (true === clicked)
}

3. Eltern-Elemente erfassen

Ale Erstes holen wir uns das entsprechende div-Element und die entsprechende Liste. Auf Erläuterungen zu diesem Code verzichte ich diesmal, den solltet ihr mittlerweile alleine verstehen.


var div = document.getElementById('todo');
var ul  = div.getElementsByTagName('ul')[0];

4. Die einzelnen Listenelemente erfassen


var first_li = ul.firstChild;
if (3 == first_li.nodeType)
{
  first_li = first_li.nextSibling;
}  

var sec_li = first_li.nextSibling;
if (3 == sec_li.nodeType)
{
  sec_li = sec_li.nextSibling;
}

Das Prinzip solltet ihr mittlerweile kennen, das habe ich im vorherigen Abschnitt ausführlich erläutert. Besonders die Sache mit den Zeilenumbrüchen, auf die die einzelnen Browser unterschiedlich reagieren.

4. Die Änderungen

Das erste Listenelement löschen

Ist in diesem Fall überhaupt kein Problem. Wir haben in der Variablen first_li eine entsprechende Referenz auf den kompletten Listenpunkt erzeugt und können den so ganz einfach in die ewigen Jagdgründe schicken:


ul.removeChild (first_li);

Das zweite Listenelement verändern

Hier wird es ein wenig komplizierter, denn selbst wenn wir nur den Link löschen, so fehlt uns am Ende immer noch dessen Inhalt, den wir ja erhalten wollen.


var a      = sec_li.firstChild;
var a_text = a.firstChild.data;

Erläuterung

Zuerst holen wir uns den Verweis auf den Link, den wir anschließend löschen möchten. Das geschieht mit var a = sec_li.firstChild;. Danach erfassen wir den Textknoten und besorgen uns dessen Inhalt mit var a_text = a.firstChild.data;.

Das Listenelement bearbeiten


sec_li.removeChild (a);
sec_li.appendChild (document.createTextNode(a_text));

Erläuterung

Als erstes entfernen wir mit sec_li.removeChild (a); den Link aus dem DOM. Hätten wir jetzt aber nicht vorher dessen Textknoten zwischengespeichert (var a_text = a.firstChild.data;), so wäre der weg. Aber so können wir ihn nun in den nach wie vor existierende Listenpunkt als Textknoten einhängen, und zwar mit sec_li.appendChild (document.createTextNode(a_text));.

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