DOM Recipes
Practical DOM manipulation recipes and tips

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Working with the DOM is a core part of JavaScript development, and certain patterns come up repeatedly. Having ready-to-use solutions for common tasks can significantly speed up your development.

In this unit, you’ll find practical recipes for common DOM manipulation tasks. We’ll cover solutions for selecting elements, modifying content, handling events, working with attributes and classes, and other everyday DOM operations.

These recipes serve as quick references that you can adapt for your own projects, saving you time when implementing common functionality.

Lessons in this unit:

0: ▶︎ Introduction
1: Hiding and showing elements
2: Check if element is descendant
3: Change colors/styles dynamically
4: DOM timing and when elements are ready
5: stopPropagation vs preventDefault
6: How to detect adblockers
7: Creating exit intent popups