Hauptmenü

Untermenü

DOM-Manipulation - Knoten verändern

1. Die Referenz

Um einen Knoten zu verändern, muss vorher eine eindeutige Referenz desselben erzeugt werden. Dabei kann man sowohl die entsprechenden Methoden des document- als auch des node-Objektes nutzen. Dabei spielt es keine Rolle, ob das Element schon direkt im HTML-/XML-Dokument vorhanden ist, oder vorher über das DOM per JavaScript erzeugt worden ist. Bei letzterem ist die Referenz aber schon vorhanden. Vorausgesetzt, man hat sie nicht aus Unachtsamkeit überschrieben. Oder weggeballert.

Wichtig

Bei allen folgenden Beispielen muss auch immer eine Referenz auf das Elternelement vorhanden sein. Da es da diverse Möglichkeiten gibt, stelle ich euch mal verschiedene Varianten vor.

2. removeChild

Damit löscht man einen bereits existierenden Kindnoten. Dabei ist der Parameter das zu löschende Element.


<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
...
wech document.getElementById('rahmen').lastChild;
document.getElementById('rahmen').removeChild(wech);

3. replaceChild

Ersetzt einen Kindknoten durch einen anderen. Dazu werden zwei Parameter benötigt. Zuerst die Referenz auf den neuen Knoten, dann die auf den zu ersetzenden.


<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
...
vatta  document.getElementById('rahmen');
absatz document.createElement('p');
text   document.createTextNode ('Dies ist ein Text');
absatz.appendChild (text);
ersetz vatta.firstChild;
vatta.replaceChild (absatzersetz);

Erläuterung

Als Erstes erzeugen wir mit vatta = document.getElementById('rahmen'); eine Referenz auf das Elternelement. Das erspart uns später ein wenig Tipparbeit. Mit den folgenden drei Zeilen erzeugen wir bekanntlichermaßen einen neuen Knoten inklusive Text. Dann wählen wir das zu ersetzende Element aus (ersetz = vatta.firstChild;) um es anschließend mittels vatta.replaceChild (absatz, ersetz); auszutauschen.

4. cloneNode

Damit wird eine exakte Kopie eines Knotens erzeugt. Der Parameter kann dabei entweder auf true oder false gesetzt werden. Bei ersterem werden alle weiteren Kindknoten ebenfalls erfasst, beim zweitem nicht, sondern nur das Hauptelement.


<div id="rahmen"><p>Text 1</p><p>Text 2</p></div>
<div id="rahmen2"></div>
...
dolly  document.getElementById('rahmen').cloneNode(true);
document.getElementById('rahmen2').appendChild (dolly);

Ein Hinweis

Dieses Beispiel ist ein wenig unglücklich, da wir ja eine komplette(!) Kopie des <div id="rahmen"> erzeugen und die in das zweite einhängen. Also haben wir jetzt zwei Elemente mit derselben ID.

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