DOM-Manipulation JavaScript - Praxistutorial 1 - Etwas klonen
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. Dolly
... war das erste geklonte Säugetier in der Geschichte
der Menschheit. Und so etwas wollen wir jetzt auch machen. Aber dafür nehmen wir kein Schaf, sondern die Überschrift 2. Ordnung aus dem
div-Element namens content. Und dabei werde ich euch zeigen, welche Auswirkungen der benötigte Parameter
für die entsprechende Methode hat.
3. Der übliche Mist und ein wenig Zufall
Als erstes holen wir uns die einzige vorhandene Überschrift 2. Ordnung. Und da es im JavaScript (im Gegensatz zu anderen
zivilisierten Sprachen) kein rand gibt, das eine zufällige Ganzzahl erzeugt, basteln wir uns etwas, das entweder eine 1 oder 2
ergibt (var zufall = Math.floor(1 + 2 * (Math.random()));). Wen Letzteres interessiert, der soll sich einfach mal das
Math-Objekt ansehen.
function cloneNode ()
{
var div = document.getElementById('content');
var h2 = div.getElementsByTagName('h2')[0];
var zufall = Math.floor(1 + 2 * (Math.random()));
}
4. Der Parameter
Um denn nun ein Klonschaf, oder genauer gesagt ein Klonelement zu erzeugen benötigen wir die cloneNode-Methode des
node-Objektes. Und die erwartet einen boolschen Parameter, also entweder true oder false.
true
Wenn man diesen Wert setzt, so wird der komplette Knoten mitsamt allen Kindelementen geklont. In diesem Fall handelt sich dabei um einen Textknoten mit dem entsprechenden Inhalt. Und das möchten wir immer dann machen, wenn unser "Zufallsgenerator" eine 1 zurückliefert.
function cloneNode ()
{
...
if (1 == zufall)
{
var dolly = h2.cloneNode(true);
}
}
false
In diesem Fall wird nur der Elementknoten dupliziert, aber nicht dessen Kindelemente. Also benötigen wir zumindest noch ein wenig Text für die neue Überschrift 2. Ordnung. Und da gehen wir den mittlerweile bekannten Weg.
function cloneNode ()
{
...
else
{
var dolly = h2.cloneNode(false);
var h2_text = document.createTextNode('blubb');
dolly.appendChild (h2_text);
}
}
5. Einhängen
Je nachdem, was unser "Zufallsgenerator" auswirft, haben wir also entweder eine Überschrift 2. Ordnung mit dem Originaltext oder mit einem lakonischen "Blubb". Und den hängen wir ganz einfach nach der Bedingung ein.
div.appendChild (dolly);
5. Fazit
DOM-Manipulation ist gar nicht so schwer, wenn man einmal das Grundprinzip verstanden hat. Allerdings wird das erst dann wirklich sinnvoll, wenn man mit Ajax und Formularen arbeitet. Und wie das geht, seht ihr im zweiten Anfängertutorial.