JavaScript DOM

Introduction
The Missing JavaScript DOM Introduction
Project Walkthrough and Install

DOM Events and JavaScript Loading
Understanding DOM Loading Events
Understanding JavaScript Loading

DOM Nodes In-Depth
DOM Nodes Explained
Creating DOM Nodes
Changing Content of DOM Elements
innerHTML versus createElement
Using DocumentFragments
Inserting DOM Elements
Inserting DOM as String Templates
Replacing DOM Elements
Cloning DOM Elements
Removing DOM Elements

Querying and Traversing the DOM
Querying DOM Nodes (HTMLCollections)
Querying DOM Nodes (NodeLists)
Looping over DOM Elements
Finding Child Elements
Finding Parent Elements
Finding Sibling Elements

Attributes, Styles and Classes
Element Properties versus HTML Attributes
Setting and Getting HTML Attributes
Setting and Getting Inline Styles
Setting and Getting Classes

Events and Event Listeners
Adding Event Listeners and Event Object
Removing Event Listeners
Event Bubbling, Capturing and Propagation
Preventing Default Event Actions
Event Delegation and Dynamic Events
Keyboard Events

Forms and Events
Accessing Forms and Elements
Form Submit Event and FormData
Transforming FormData for the Server
Posting FormData via Fetch API
Handling Input Elements
Handling Radio Input Elements
Handling Checkbox Input Elements
Handling Select Elements

Project Build
Project Setup and Install
Structuring our HTML Template
State Initialization and Submit Events
Rendering State with Template Literals
Updating State via Event Delegation
Deleting Items from State
Toggling UI State and Filtering Collections
Persisting State to LocalStorage
Dynamic DOM Injection and Editing