ToDo-Liste - DOM-Manipulation

[Matthias Scharwies]

Hallo zusammen,

Nur zum Vergleich; da waren wir 2012!

• JavaScript (2011)
  • 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:^[1]

• JavaScript und das DOM
  • JavaScript und das DOM/DOM-Manipulation

In Kapitel 1 werden getElementById, querySelector, querySelectorAll und textContent eingeführt.

In Kapitel 2 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^[2]
• remove anstelle von removeChild.^[3]

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

2. Attribute auslesen und setzen

Hier hirne ich noch;^[4] auch was ich mit dem halben Bildwechsler machen soll.

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

---

1. Ich musste das schnell rüberziehen, weil @Klark einiger meiner neuen Links wieder zurückgesetzt hatte. ;-) ↩︎

2. Fun Fact: Auf Mastodon ist innerHTML das Mittel der Wahl!
   Wie sagt man denen freundlich, dass es was Besseres gibt? ↩︎

3. Das CSS räum' ich noch auf! ↩︎

4. Heydon kümmert sich eher um Barrierefreiheit und diskutiert, ob ein "X" oder ein "🗑" zugänglicher wäre. Interessant, aber nicht das Thema hier. ↩︎