JavaScript DOM Manipulation Exercises
Document Object Model rendering and events
Make browser interfaces respond to real actions
Practise selecting, updating, creating, and removing page elements with JavaScript. These DOM exercises connect code to visible browser behaviour through events, forms, traversal, classes, storage, timers, and realistic interface state.
- Exercises
- 80
- Difficulty
- Beginner to Hard
- Good to know first
- Know JavaScript fundamentals and basic HTML; CSS familiarity is helpful.
What you’ll practise
- Selecting and updating elements
- Attributes, classes, and styles
- Creating and traversing nodes
- Events, forms, and delegation
- Timers, storage, and browser state
Challenges
document.querySelector
document.querySelector
`document.querySelector` finds the first element that matches a CSS selector. Th...
getElementById
`document.getElementById` selects one element by its exact ID value. You pass th...
querySelectorAll
`querySelectorAll` returns every element that matches a CSS selector. The result...
Data Attribute Selection
Selectors can describe element state, not just tag names, classes, or IDs. A `da...
Scoped Selection
Practice JavaScript DOM selection by finding a container first and then querying...
Debug a Selector
Debug a DOM selector that updates the first matching status instead of the inten...
textContent
`textContent` is the plain text inside an element. Reading it gives you the curr...
Text as Data
When text comes from a user, a database, or an API, your code should treat it as...
Read Then Write
DOM updates often depend on what the page already says. In that case, read the c...
Targeted Text Update
Changing an element's `textContent` replaces all text inside that element, inclu...
Fallback Text
Write a small DOM rendering function that normalizes text before displaying it. ...
Click Events
An event listener stores behaviour for later. The browser calls your callback wh...
Click Counter
Event handlers often need to remember state between interactions. A counter star...
Change Events
The `change` event is useful for controls where the user commits a new choice, s...
Input Events
Use the input event to keep a DOM preview in sync with a form field while handli...
Disable After Click
Handle a JavaScript DOM click event that disables an invite button after submiss...
classList.add
`classList` is the DOM API for working with an element's classes. `classList.add...
classList.remove
`classList.remove` removes one class without touching the other classes on the e...
Toggle Classes
`classList.toggle` flips whether a class is present. It is useful for UI states ...
Replace Classes
When one state class should become another, `classList.replace` describes the ch...
Class State
Use classList.contains after toggling a DOM state class to keep button text alig...
Form Values
Inputs store their current text in the `value` property. A submit handler can re...
Checkbox State
Checkboxes store their current state in the `checked` property. That value is a ...
Form Validation
Validate a form field by trimming input text, showing a DOM error message, and o...
FormData Summary
Use FormData during a submit event to read multiple form fields and render a pro...
Form-Driven Lists
Build a form-driven list by normalizing input, ignoring blank submits, clearing ...
Multiple Field Validation
Validate two form fields with separate DOM errors and accessible invalid states....
Creating Elements
`document.createElement` creates a new element object. It does not appear on the...
Create a Button
Created elements are regular DOM nodes. Before inserting them, you can set their...
Building DOM from Data
Create DOM elements from object data, append them in the right structure, and ke...
Create Options
Create select options from array data using real DOM nodes and a document fragme...
Media Card
Build a nested DOM card from object data without parsing markup strings. This ha...
remove
`remove` deletes an element from the DOM. After removal, the element is no longe...
Clear a Container
Sometimes the children of a container are stale, but the container itself still ...
Removing a Set
Use querySelectorAll with remove to delete only matching DOM rows while preservi...
Remove Clicked Item
Use a click handler and closest to remove only the toast that owns the clicked c...
Debug Removal
Debug DOM code that hides archived rows instead of removing them from the docume...
Rendering Arrays
Rendering an array means turning each item into visible DOM. The array is the so...
Render Badges
Rendering repeated data means each item should become its own element. A single ...
Empty States
Render filtered data into the DOM with a clear empty state, avoiding stale list ...
Render Table Rows
Render object data into semantic table rows and cells. This medium DOM exercise ...
Dashboard Rendering
Build a small DOM dashboard from data by filtering visible records, rendering ca...
Filtered Rerender
Practice JavaScript DOM rerendering by filtering ticket data, clearing stale row...
Default Actions
Some events come with browser behaviour. Clicking a link normally navigates. Sub...
event.target
Use event.target in a delegated click handler to update the clicked DOM item, ev...
Keyboard Events
Use a keydown event to close a DOM dialog only when Escape is pressed. This exer...
Delegated Removal
Use event delegation to remove the list item that owns a clicked remove control....
Event Propagation
Handle modal backdrop clicks without closing the dialog when the panel itself is...
Custom Events
Practice JavaScript CustomEvent by dispatching app-specific event data from one ...
document.title
`document` represents the current page. Some properties describe elements in the...
documentElement
`document.documentElement` is the root `html` element for the current page. It i...
document.body
`document.body` is a direct reference to the page's body element. Use it when a ...
window.location
`window` represents the browser environment around the document. `window.locatio...
document.head
Practice JavaScript DOM document APIs by adding page metadata to document.head w...
Scroll Position
Practice reading window scroll position from a scroll event and reflecting it in...
setAttribute
Attributes are the values written on HTML tags, such as `src`, `alt`, `href`, an...
Disabled State
Some HTML attributes are reflected by DOM properties. For a button, the `disable...
Data Attributes
`data-*` attributes let HTML carry small pieces of custom state. In JavaScript, ...
aria-expanded
Expandable controls should expose their state with `aria-expanded`. The visible ...
Attribute Rules
Update only external DOM links with target and rel attributes while leaving inte...
Value Property
Debug an input update that changes the value attribute instead of the current fi...
Observe Attributes
Practice MutationObserver by watching a DOM element's data-state attribute and r...
Element Styles
Every element has a `style` object for inline styles. JavaScript property names ...
Display Style
The `style` object can change inline CSS on an element. For display-related stat...
Styling from Values
JavaScript often receives a number, while CSS needs a formatted value. A progres...
Position from Data
JavaScript numbers do not automatically become CSS lengths. If CSS expects pixel...
CSS Custom Properties
Use style.setProperty to update CSS custom properties from DOM data and keep the...
Clamped Progress
Write a DOM style updater that clamps progress values before setting width and l...
parentElement
Traversal means moving from one DOM node to a related node. `parentElement` move...
First and Last Child
Element traversal properties move between element nodes. `firstElementChild` and...
closest
Use closest in an event handler to find the relevant DOM card from a nested butt...
Sibling Traversal
Use nextElementSibling to move from a heading button to its paired panel and tog...
Previous Sibling
Practice JavaScript DOM traversal with previousElementSibling by moving from the...
Element Children
Use children instead of childNodes to count actual DOM elements in a list with w...
nth-child Selection
Practice DOM traversal with an nth-child selector by selecting one positional it...
setTimeout
`setTimeout` schedules work to happen later. The callback does not run while the...
clearTimeout
`setTimeout` returns an ID for the scheduled work. `clearTimeout` uses that ID t...
setInterval and clearInterval
Use setInterval and clearInterval to update a DOM countdown repeatedly, then sto...
Timer Sequence
Schedule a short sequence of DOM status updates with setTimeout. This exercise c...
Interval Progress
Use setInterval to drive a DOM progress bar to completion, then stop the interva...