AI Workshop: learn to build apps with AI →
DOM Recipes
Practical DOM manipulation recipes and tips

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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