-
DOM (DocumentObjectModel)
- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
- Baum von Nodes
- Root-Nodes, Child-Nodes
- Abbilden des States im DOM
-
Ladereihenfolge
- Mögliche Orte für script-Tags
- Raceconditions mit dem DOM
- "Document Ready"-Handler, DOMContentLoaded Event
-
Erzeugen von HTML Nodes aus JavaScript
- Document.createElement()
- template-tag https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
-
Manipulation des DOM aus JavaScript
- Element.append() / before() / after()
- Element.remove()
- Element.replaceWith() / replaceChildren()
-
Events in JavaScript
- Element.addEventListener()
- DOMContentLoaded / Click / mousemove / ...
-
Todo App
- HTML5 Vanilla JS Only, DOM als Persistenz
- Delete-Link statt einfach aufs Item klicken
- Transition to localStorage
- Integration Bootstrap
- Container-Class
- Form-Styiling
- ListGroup-Styling
- Navbar
- Bootswatch
- Bootstrap Icons
- Persistenz im Backend