Matthias Scharwies: ToDo-Liste - Vorüberlegungen

Beitrag lesen

Guten Morgen,

es geht ja um ein DOM-Tutorial, in dem man anhand eines Beispiels die meisten dieser Punkte abarbeitet:

  1. Selecting Elements
  2. Creating and Inserting Elements
    document.createElement(tagName)
    parentElement.appendChild(childElement)
    element.insertAdjacentHTML(position, html)
  3. Changing Content
    element.textContent
  4. Changing Attributes
    element.setAttribute(attribute, value)
  5. Traversing the DOM

Mit diesem DOM kann man den „Checkbox-Hack“ verwenden, um erledigte Tasks entsprechend anders darzustellen.

Und genau so etwas würde ich mit [aria-selected]{ background: green;} realisieren.

Auch die Buttons kann man dann (wahlweise) unsichtbar schalten.

Das war meine Überlegung: Anstelle des li-Inhalts einen Button mit dem Tasttext, da gäbe es aber keinen Hinweis, dass man ihn anklicken solle, um ihn als erledigt abzuhaken.

Für alles, was den Eintrag inhaltlich verändert, braucht es einen passenden Button. Das Abhaken sollte eine Checkbox sein.

Genau. So mache ich es. Wobei ich das Editieren wohl weglasse, und links die Checkbox und rechts den Löschen-Button (frei nach Heydon Pickering) platziere.

Das mit contenteditable würde bedeuten, dass man das DOM innerhalb eines Elements verändern kann. Das willst Du bei einer ToDo-Liste nicht, denn sonst könnte man das <li> mit beliebigen Kindelementen befüllen, die ihrerseits Listen, Tabellen und noch viel mehr sein können. Und nur damit der User etwas kursiv und fett formatieren kann... würde ich unbedingt davon abraten.

Das könnte man ja auch mit Script um HTML bereinigen und nur in textContent schreiben (siehe 3.), wäre für ein Anfänger-Tutorial aber zu komplex.


Im Original-Artikel wird erst ein Absatz dynamisch eingefügt → 1. Idee: Da mach' ich eine li draus.

Leider kommt danach eine Helfer-Funktion, die auf Wunsch Buttons oder p-Absätze erzeugt; Das geht in einer Liste leider nicht.
→ li und ul>li erzeugen lassen? -> li und li>button erzeugen lassen? → beides zu komplex!

Wsl. lass ich diesen Abschnitt drin und fang erst danach an mit dem Anwendungsbeispiel an. Oder ich lasse Buttons und li-Elemente in verschiedene Elternelemente → wäre aber unübersichtlich.

Wäre aber ein Übergang zu removeElement.


Ich überlege noch!

Herzliche Grüße

Matthias Scharwies

--
Was ist eine Signatur?