DOM basics
This course explains the DOM, the live tree of objects a browser builds from the HTML text a Rails app sends. It covers element, text and comment nodes, family terms such as parent and descendant, and the document root. It shows how to inspect the tree with DevTools. It explains how CSS selectors and combinators match nodes. It also shows how JavaScript and Turbo change the tree after load. Last, it defines the render tree, reflow, repaint, virtual DOM and Shadow DOM, and reads a small product card step by step.
What you'll learn
- ✓How the HTML text a server sends differs from the DOM tree the browser builds
- ✓Node types, tree relationships and the document root
- ✓Reading and temporarily editing the live DOM in DevTools
- ✓How CSS selectors, combinators and querySelector match nodes in the tree
- ✓Changing the DOM with createElement, appendChild, textContent and remove, and how Turbo Drive and Turbo Frames update it
- ✓What the render tree, reflow, repaint, virtual DOM and Shadow DOM mean
What is the DOM, really?
Start with a fact about every page a Rails app serves. The HTML your server sends over the network is just text, a string of characters like any other file. When a browser receives that text, it builds something else from it: a live, in-memory tree of objects called the DOM (Document Object Model).…
Read the full lesson free →Curriculum
7 lessonsWhat is the DOM, really?
Explains how the browser turns HTML text from a Rails app into a live, in-memory tree of objects.
Nodes, elements, and the tree
Covers element, text and comment nodes, parent and descendant terms, the document root, and where attributes live.
Inspecting the DOM with DevTools
Shows how to open DevTools, browse the Elements panel, read styles, make temporary edits and use the Console.
How CSS selectors walk the tree
Explains how tag, class, ID and combinator selectors match nodes, plus specificity and querySelector in JavaScript.
The DOM is live: how JavaScript (and Turbo) change it
Covers the core JavaScript operations for changing the DOM, how Turbo Drive and Frames work, and innerHTML risks.
DOM terms you'll keep hearing
Defines the CSSOM, render tree, reflow, repaint, virtual DOM and Shadow DOM using the tree model.
Putting it all together: reading a real page's DOM tree
Applies every concept to a small product card, from drawing its tree to adding a node in the Console.