SELF-Wiki: Was ist das DOM?

[Matthias Scharwies]

Guten Morgen,

vielen Dank an die Teilnehmer des Workshops am Mittwoch. Auch wenn wir nur zur viert waren, konnten wir doch einiges klären!

Thema: JavaScript und das DOM

Hier geht es um das 1. und 3. Kapitel, bei denen ich einerseits Verbesserungsbedarf sah, jetzt aber nicht weiß, ob ich, bzw. das Tutorial in die richtige Richtung laufe(n).

1. Was ist das DOM?

Das Kapitel ist jetzt aufgeräumt und in sich stimmig. Der Node-Inpektor zeigt als {{LiveBeispiel}} gleich die verschiedenen Knoten.

Dann folgt ein "Hallo Welt"-Beispiel aus dem Einstieg, bei dem das alert() jetzt durch

document.getElementById('info').textContent = 'Hallo Welt!';

ersetzt wird. Dieses Beispiel wird dann step by step ausgebaut. Am Ende winken dann Fortsetzungsvorlage und Cards zu den Folge-Tutorials.

Schaut mal rein!

3. DOM-Manipulation

...weswegen ich den Neuansatz mit der ToDo-Liste anfing. Sie ist aber im halbfertigen Zustand bereits komplexer als der Bildwechsler.

Da haben wir einige Ideen gesammelt, die ich jetzt sukzessive umsetzen will.

4. DOM-Traversal

Eigentlich könnte das noch ins 1. Kapitel, würde dort aber aus einem Tutorial einen theoretischen Grundlagenartikel machen.

Hier wird noch einmal der Elementbaum mit seinen Verzweigungen, aber auch mit seinen „Früchtchen“ in Form von /n-Textknoten visualisiert, besonders im {{LiveBeispiel}} zu den childNodes, das wir schon hatten, hier jetzt aber wirklich reinpasst!

X. unsere Referenzseiten

Hier habe ich mich wirklich geärgert, wie kurz manche Seiten waren. So gab es Links von parentElement zurück auf parentNode, der eigentlich wichtigere Link in die Gegenrichtung fehlte. Hier habe ich eine Seite angelegt, die in die betreffenden Referenzartikel eingebunden wird. Sieht doch gleich viel besser aus!

Dieser Beziehungsinspektor ist nur eins von mehreren neuen Beispielen, die das Ganze anschaulicher machen.

Edit von Rolf: Link zum Beziehungsinspektor

Herzliche Grüße

Matthias Scharwies