DOM-Manipulation JavaScript - Praxistutorial 1 - Listenelemente verändern
1. Die Abschnitte
- Einführung
- Die Initialisierung
- Eine Liste auslesen
- Eine Liste ergänzen Teil 1
- Eine Liste ergänzen Teil 2
- Listenelemente verändern
- Textknoten bearbeiten
- Etwas klonen
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