DOM Manipulation with JavaScript

An HTML page is not fixed once it loads. JavaScript can find elements, change their content or appearance, respond to people, and create new parts of the page. This course teaches those changes one small step at a time. You should know basic HTML and JavaScript variables, functions, and arrays; the first lessons review the browser concepts you need.

What you will build

• Read the DOM as a tree and select the right element without assuming it exists.
• Safely update text and attributes, including accessible state.
• Add and remove classes and styles while keeping CSS responsible for most presentation.
• Create, insert, replace, and remove elements without treating untrusted text as HTML.
• Handle clicks, keyboard input, and events from dynamically created elements.
• Read forms, give live feedback, and build a filter, a disclosure, and a dynamic list.
• Call APIs with plain JavaScript, check responses, handle loading and errors, and render returned data safely.

How to use the course

Each topic starts with a completed, runnable example. Read the explanation and inspect the index.html, style.css, and script.js tabs; run the browser preview and change one small thing to see what it does. The following exercise revisits the same idea in a different setting with a starter, tests, and a reference solution. Later sections bring earlier skills back in new combinations. Section quizzes check understanding after the worked examples and practice.

The order matters: selectors come before updates, updates before node creation, events before form interactions, and all of those before the final projects. Start at the beginning if the DOM is new to you; revisiting a skill is part of the lesson, not a sign that you missed it.

Sections

1. DOM Foundations — browser document, tree, script loading, and first selectors.
2. Finding and Traversing Elements — groups, relatives, scoped searches, and missing nodes.
3. Text, HTML, and Attributes — safe content updates, links, and custom data.
4. Classes, Styles, and Visibility — state-driven appearance and accessible disclosure.
5. Creating, Moving, and Removing Nodes — new elements and safe replacement.
6. Events and Interaction — clicks, delegation, and keyboard behavior.
7. Forms and Live Feedback — input, submit, validation, change, and reset.
8. Practical DOM Projects — filtering, disclosure controls, and dynamic lists.
9. Project — Community Directory — select, search, add, and remove directory cards.
10. Project — Workshop Planner — show, add, and manage sessions with accessible feedback.
11. Fetch API and DOM Updates — requests, responses, loading and errors, query parameters, and cancellation.
12. Project — Data Dashboard — build a resilient API-style interface using the DOM.