Chapter 3: Working with DOM

21 task, 1 challenge, 1 summary

We will find out what the DOM API is, work with templates, receive an overview of new events and methods for managing DOM, and figure out how to clone elements and program a to-do list app.

Start
1. What are you planning to do? Task
2. The “change” event Task
3. How the “change” event works Task
4. Deleting the element from the list Task
5. How to check the collection length Task
6. Debugging the code Task
7. Static and live collections Task
8. Displaying the message on the page Task
9. The “submit” event Task
10. Cancelling the form submission Task
11. How to obtain text from the input field Task
12. Templates and the <template> tag Task
13. The contents of the <template> tag, document-fragment Task
14. Cloning and inserting elements, part 1 Task
15. Cloning and inserting elements, part 2 Task
16. Cloning and inserting elements, part 3 Task
17. Cloning and inserting elements, part 4 Task
18. How to clone elements Task
19. Adding a new element to a list Task
20. Deleting a new task in the list Task
21. Clearing the input field Task
22. Summary of “Actions with DOM” Summary
23. The third program: “Instant messenger” Challenge