What is the DOM, really?

The HTML file and the thing the browser uses are different

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). Everything you'll do with CSS, JavaScript, and later Hotwire targets that tree, not the original text file.

From text to tree

<body>
  <h1>Welcome</h1>
  <p>Hello, world.</p>
</body>

The browser reads this text top to bottom and builds a structure where each tag becomes an object with a place in a hierarchy:

              body
             /    \
           h1      p
            |       |
        "Welcome" "Hello, world."

That diagram is the DOM. There, h1 is an object with properties and methods. It has a parent (body) and a child, the text node "Welcome".

Why "object model" is the right name

Every node in that tree is an object you can inspect and change. It has a type, attributes, a list of children and a reference to its parent. That's how JavaScript changes a page after it loads. It changes the objects the browser is rendering to the screen, and no HTML file is involved.

Where a Rails app fits into this picture

Rails renders ERB ──▶ sends HTML text over HTTP ──▶ browser parses it ──▶ builds the DOM ──▶ renders pixels

Your app/views/*.erb files, your render calls, everything in Rails' view layer: all of it exists to produce that HTML text. The DOM is what happens next, entirely inside the browser, completely outside Rails' control. This boundary matters once you reach Hotwire and Turbo later on the roadmap. Those tools take HTML from the server and update the live DOM with it, instead of having the browser load a new page.

A quick, concrete proof

Open any web page, right-click, and compare two things:

• View Page Source: shows the original HTML text just as the server sent it, never changing
• Inspect (DevTools' Elements panel, covered fully in Lesson 3): shows the current DOM, which can differ from the source the instant any JavaScript runs

On a JavaScript-heavy page, the two views often disagree within milliseconds of load. The DOM is a separate, living thing that started from the file and moved on.

How this course is organized

• Lesson 2: nodes, elements and the shape of the tree
• Lesson 3: looking at a live DOM with browser DevTools
• Lesson 4: how CSS selectors use tree relationships to target elements
• Lesson 5: how JavaScript (and Rails' own Hotwire/Turbo) changes the DOM after load
• Lesson 6: terms you'll keep running into: render tree, reflow, virtual DOM
• Lesson 7: reading a real page's DOM tree end to end

Key takeaways

• HTML is text; the DOM is the live, in-memory tree of objects a browser builds from that text.
• Every DOM node is a real object with a type, attributes, children, and a parent, not a string.
• Rails produces HTML text; the browser turns it into the DOM entirely on its own, outside Rails' control.
• View Source shows the original HTML; Inspect shows the current DOM: they can diverge the moment JavaScript runs.