DOM-Manipulation JavaScript - Praxistutorial 1 - Die Initialisierung
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 Konstruktorfunktion
... heißt manipulateDOM und benötigt einen Parameter zum Ansteuern der einzelnen Methoden, die wir diesmal komplett
als "private" deklarieren, so dass man von außen nicht auf sie zugreifen kann.
function manipulateDOM (func)
{
// Hier kommen später die Methoden hinein
}
3. Die Event-Handler
... wollen wir diesmal dynamisch anlegen. Damit dass sauber funktioniert, packen wir den weiteren Code in ein window.onload =
function (). Damit erreichen wir, dass die Event-Handler erst gesetzt werden, wenn die Seite
komplett(!) geladen ist. So, wenn das geschehen ist, müssen wir als Erstes alle Links in dem entsprechenden
div-Element auslesen. Und das kann man so machen.
window.onload = function ()
{
var div = document.getElementById('todo');
var links = div.getElementsByTagName('a');
}
Ale Ergebnis erhalten wir in einem Array die Referenzen auf alle Links im <div id="todo">. Und denen weisen
wir dann in einer Schleife die Event-Handler zu.
window.onload = function ()
{
...
for (i = 0; i < links.length; i++)
{
var id = links[i].getAttribute('id');
document.getElementById(id).onclick = function ()
{
manipulateDOM(this.id + '()');
}
}
}
Erläuterung
Mit var id = links[i].getAttribute('id'); holen wir uns die ID-Namen der einzelnen Links. Und denen weisen wir mit
document.getElementById(id).onclick = function () den Event-Handler zu, wo wir dann auf das Objekt
manipulateDOM zugreifen.
Ein wenig verrückt
... ist der Parameter, den wir übergeben. Denn this.id + '()' ist die Methode, die wir aufrufen möchten.
Das Ergebnis muss man sich in etwa so vorstellen: getList(), setList(), etc.. Es handelt sich also um den
Aufruf einer Funktion, die in einem String verpackt ist. Und damit das funktioniert, müssen wir ein wenig tricksen.
4. eval
Wir haben also der manipulateDOM den "Aufruf" einer Methode übergeben. Damit das nun sauber
funktioniert, muss zum Beispiel aus der Zeichenkette "getList()" echter JavaScript-Code gemacht werden.
Und dazu benötigen wir obigen Befehl, den ich sonst meide, wie der Teufel das Weihwasser. Hier mache ich einfach mal, weil
ich keine große Lust habe, noch mit irgendwelchen zusätzlichen Arrays zu arbeiten. Außerdem ist es mal ganz interessant, damit
zu arbeiten. Also probiert das hier mal aus. Und natürlich auch auf den richtigen Link klicken.
function manipulateDOM (func)
{
eval (func);
function getList()
{
alert ('text');
}
}
Hinweis
Wenn ihr auf einen Link klickt, zu dem es noch keine entsprechende Methode gibt, so bekommt ihr natürlich eine Fehlermeldung um die Ohren gehauen. Also haltet eure Griffel im Zaum.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt