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**](https://wiki.selfhtml.org/wiki/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?**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) Das Kapitel ist jetzt aufgeräumt und in sich stimmig. Der [Node-Inpektor](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM#Einfacher_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**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#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](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Whitespace), 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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/parentNode#Siehe_auch), die in die betreffenden Referenzartikel eingebunden wird. Sieht doch gleich viel besser aus! Dieser [Beziehungsinspektor](https://wiki.selfhtml.org/wiki/JavaScript/DOM/NonDocumentTypeChildNode/previousElementSibling) ist nur eins von mehreren neuen Beispielen, die das Ganze anschaulicher machen. *Edit von Rolf: Link zum Beziehungsinspektor* Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

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**](https://wiki.selfhtml.org/wiki/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?**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) Das Kapitel ist jetzt aufgeräumt und in sich stimmig. Der [Node-Inpektor](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM#Einfacher_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**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#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](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Whitespace), 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 Gegenrichtng fehlte. [Hier habe ich eine Seite angelegt](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/parentNode#Siehe_auch), die in die betreffenden Referenzartikel eingebunden wird. Sieht doch gleich viel besser aus! Dieser [Beziehungsinspektor](https://wiki.selfhtml.org/wiki/JavaScript/DOM/NonDocumentTypeChildNode/previousElementSibling) ist nur eins von mehreren neuen Beispielen, die das Ganze anschaulicher machen. *Edit von Rolf: Link zum Beziehungsinspektor* Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

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**](https://wiki.selfhtml.org/wiki/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?**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) Das Kapitel ist jetzt aufgeräumt und in sich stimmig. Der [Node-Inpektor](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM#Einfacher_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**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#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](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Whitespace), 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 Gegenrichtng fehlte. [Hier habe ich eine Seite angelegt](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/parentNode#Siehe_auch), die in die betreffenden Referenzartikel eingebunden wird. Sieht doch gleich viel besser aus! Dieser [Beziehungsinspektor](JavaScript/‌DOM/‌NonDocumentTypeChildNode/‌previousElementSibling) ist nur eins von mehreren neuen Beispielen, die das Ganze anschaulicher machen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

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**](https://wiki.selfhtml.org/wiki/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?**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) Das Kapitel ist jetzt aufgeräumt und in sich stimmig. Der [Node-Inpektor](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM#Einfacher_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**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#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 Gegenrichtng fehlte. [Hier habe ich eine Seite angelegt](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/parentNode#Siehe_auch), die in die betreffenden Referenzartikel eingebunden wird. Sieht doch gleich viel besser aus! Dieser [Beziehungsinspektor](JavaScript/‌DOM/‌NonDocumentTypeChildNode/‌previousElementSibling) ist nur eins von mehreren neuen Beispielen, die das Ganze anschaulicher machen. Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)