Hallo zusammen, Nur zum Vergleich; da waren wir 2012! * [JavaScript (2011)](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript) - [JavaScript/Tutorial/Grundlagen der Programmierung](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript/Tutorial/Grundlagen_der_Programmierung) (2011) Das bestehende Tutorial habe ich 2016-2019 geschrieben; allerdings basierend auf dem, was mir @Felix Riesterer von 2012-14 beigebracht hatte. (Vor)-Letztes Jahr hatten wir schon überlegt, was man verbessern könnte, sind aber steckengeblieben. Mittlerweile habe ich das Tutorial umbenannt:[^3] [^3]: Ich musste das schnell rüberziehen, weil @Klark einiger meiner neuen Links wieder zurückgesetzt hatte. ;-) * [**JavaScript und das DOM**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM) - [JavaScript und das DOM/**DOM-Manipulation**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation) In [Kapitel 1](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) werden `getElementById`, `querySelector`, `querySelectorAll` und `textContent` eingeführt. In [Kapitel 2](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Ereignisverarbeitung) wird noch mal die Einbindung mit script und dann DOMContentLoaded erklärt. Jetzt zur ToDo-Liste: Sie ist der Aufhänger und rote Faden, Thema ist DOM-Manipulation! Und zwar mit ES6, `var` und `getElementById` fliegen raus! # 1. Elemente erzeugen und wieder löschen - createElement(), die Helferfunktion ist in den Anhang gerutscht - insertAdjacentHTML, da wir mehrere Elemente haben[^1] - remove anstelle von removeChild.[^4] [^4]: Das CSS räum' ich noch auf! [^1]: Fun Fact: Auf [Mastodon](https://bildung.social/@selfhtml/113762672373794648) ist innerHTML das Mittel der Wahl! Wie sagt man denen freundlich, dass es was Besseres gibt? Und das ist mir aufgefallen: mit den „neuen“ DOM-Methoden findet der Elementbaum und **DOM-Traversal** im Hintergrund statt. Deshalb habe ich einen zweiten Abschnitt in den Anhang gepackt: [**DOM-Traversal**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#DOM-Traversal) # 2. [Attribute auslesen und setzen](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Komfort-Version) Hier hirne ich noch;[^2] auch was ich mit dem halben Bildwechsler machen soll. [^2]: Heydon kümmert sich eher um Barrierefreiheit und diskutiert, ob ein "X" oder ein "🗑" zugänglicher wäre. Interessant, aber nicht das Thema hier. # 3. Web Storage, wie im Eingangspost erwähnt **Ziel wäre es**, das Tutorial fertigzustellen und von den JS-Referenzseiten drauf verlinken. Profis wissen, dass es `closest` und `remove` gibt, andere vertrauen weiter auf `parentNode` und `childNode`. Diese neuen Methoden möchte ich hier vorstellen! Für die **node**-Methoden bräuchte es ein eigenes Tutorial - evtl mit XML? **Hat jemand Ideen?** Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Hallo zusammen, Nur zum Vergleich; da waren wir 2012! * [JavaScript (2011)](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript) - [JavaScript/Tutorial/Grundlagen der Programmierung](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript/Tutorial/Grundlagen_der_Programmierung) (2011) Das bestehende Tutorial habe ich 2016-2019 geschrieben; allerdings basierend auf dem, was mir @Felix Riesterer von 2012-14 beigebracht hatte. (Vor)-Letztes Jahr hatten wir schon überlegt, was man verbessern könnte, sind aber steckengeblieben. Mittlerweile habe ich das Tutorial umbenannt:[^3] [^3]: Ich musste das schnell rüberziehen, weil @Klark einiger meiner neuen Links wieder zurückgesetzt hatte. ;-) * [**JavaScript und das DOM**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM) - [JavaScript und das DOM/**DOM-Manipulation**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation) In [Kapitel 1](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) werden `getElementById`, `querySelector`, `querySelectorAll` und `textContent` eingeführt. In [Kapitel 2](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Ereignisverarbeitung) wird noch mal die Einbindung mit script und dann DOMContentLoaded erklärt. Jetzt zur ToDo-Liste: Sie ist der Aufhänger, Thema ist DOM-Manipulation! Und zwar mit ES6, `var` und `getElementById` fliegen raus! # 1. Elemente erzeugen und wieder löschen - createElement(), die Helferfunktion ist in den Anhang gerutscht - insertAdjacentHTML, da wir mehrere Elemente haben[^1] - remove anstelle von removeChild.[^4] [^4]: Das CSS räum' ich noch auf! [^1]: Fun Fact: Auf [Mastodon](https://bildung.social/@selfhtml/113762672373794648) ist innerHTML das Mittel der Wahl! Wie sagt man denen freundlich, dass es was Besseres gibt? Und das ist mir aufgefallen: mit den „neuen“ DOM-Methoden findet der Elementbaum und **DOM-Traversal** im Hintergrund statt. Deshalb habe ich einen zweiten Abschnitt in den Anhang gepackt: [**DOM-Traversal**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#DOM-Traversal) # 2. [Attribute auslesen und setzen](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Komfort-Version) Hier hirne ich noch;[^2] auch was ich mit dem halben Bildwechsler machen soll. [^2]: Heydon kümmert sich eher um Barrierefreiheit und diskutiert, ob ein "X" oder ein "🗑" zugänglicher wäre. Interessant, aber nicht das Thema hier. # 3. Web Storage, wie im Eingangspost erwähnt **Ziel wäre es**, das Tutorial fertigzustellen und von den JS-Referenzseiten drauf verlinken. Profis wissen, dass es `closest` und `remove` gibt, andere vertrauen weiter auf `parentNode` und `childNode`. Diese neuen Methoden möchte ich hier vorstellen! Für die **node**-Methoden bräuchte es ein eigenes Tutorial - evtl mit XML? **Hat jemand Ideen?** Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?

Hallo zusammen, Nur zum Vergleich; da waren wir 2012! * [JavaScript (2011)](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript) - [JavaScript/Tutorial/Grundlagen der Programmierung](http://web.archive.org/web/20130318183940/http://wiki.selfhtml.org/wiki/JavaScript/Tutorial/Grundlagen_der_Programmierung) (2011) Das bestehende Tutorial habe ich 2016-2019 geschrieben; allerdings basierend auf dem, was mir @Felix Riesterer von 2012-14 beigebracht hatte. (Vor)-Letztes Jahr hatten wir schon überlegt, was man verbessern könnte, sind aber steckengeblieben. Mittlerweile habe ich das Tutorial umbenannt: * [**JavaScript und das DOM**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM) - [JavaScript und das DOM/**DOM-Manipulation**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation) In [Kapitel 1](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Was_ist_das_DOM) werden `getElementById`, `querySelector`, `querySelectorAll` und `textContent` eingeführt. In [Kapitel 2](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/Ereignisverarbeitung) wird noch mal die Einbindung mit script und dann DOMContentLoaded erklärt. Jetzt zur ToDo-Liste: Sie ist der Aufhänger, Thema ist DOM-Manipulation! Und zwar mit ES6, `var` und `getElementById` fliegen raus! # 1. Elemente erzeugen und wieder löschen - createElement(), die Helferfunktion ist in den Anhang gerutscht - insertAdjacentHTML, da wir mehrere Elemente haben[^1] - remove anstelle von removeChild. [^1]: Fun Fact: Auf [Mastodon](https://bildung.social/@selfhtml/113762672373794648) ist innerHTML das Mittel der Wahl! Wie sagt man denen freundlich, dass es was Besseres gibt? Und das ist mir aufgefallen: mit den „neuen“ DOM-Methoden findet der Elementbaum und **DOM-Traversal** im Hintergrund statt. Deshalb habe ich einen zweiten Abschnitt in den Anhang gepackt: [**DOM-Traversal**](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#DOM-Traversal) # 2. [Attribute auslesen und setzen](https://wiki.selfhtml.org/wiki/JavaScript_und_das_DOM/DOM-Manipulation#Komfort-Version) Hier hirne ich noch;[^2] auch was ich mit dem halben Bildwechsler machen soll. [^2]: Heydon kümmert sich eher um Barrierefreiheit und diskutiert, ob ein "X" oder ein "🗑" zugänglicher wäre. Interessant, aber nicht das Thema hier. # 3. Web Storage, wie im Eingangspost erwähnt **Ziel wäre es**, das Tutorial fertigzustellen und von den JS-Referenzseiten drauf verlinken. Profis wissen, dass es `closest` und `remove` gibt, andere vertrauen weiter auf `parentNode` und `childNode`. Diese neuen Methoden möchte ich hier vorstellen! Für die **node**-Methoden bräuchte es ein eigenes Tutorial - evtl mit XML? **Hat jemand Ideen?** Herzliche Grüße Matthias Scharwies -- Was ist eine Signatur?