How the Browser Runs Your Code

Advanced · 18 min read · ▶ live playground · ✦ checkpoint

Until now your JavaScript ran next to a console. In this part it runs inside a page. Before touching the DOM, it pays to know what the browser actually does with an HTML file — because the order it does things in explains half of the bugs beginners hit, including the classic "my script can't find my element."

From HTML text to pixels

A browser turns text into a picture in a pipeline of steps:

  1. Parse — the browser reads the HTML text from top to bottom.
  2. DOM — parsing builds the Document Object Model, a live tree of objects, one per element. This tree is what your JavaScript can see and change.
  3. CSSOM — stylesheets are parsed into the CSS Object Model, the tree of style rules.
  4. Render — the browser combines the two trees, works out where everything goes, and paints pixels.

The key word is tree. This HTML:

<body>
  <main>
    <h1>Mission Control</h1>
    <p>Systems <strong>nominal</strong>.</p>
  </main>
</body>

becomes a tree where <main> is a child of <body>, and <strong> sits inside the paragraph. Your JavaScript never edits the HTML text — it talks to this object tree, and the browser repaints whatever you change.

Try it — your first live page

This playground is different from the ones you know: it has HTML, CSS, and JS tabs, and Run builds a real page in the preview below — a sandboxed page of its own, with your JavaScript running inside it. The console under the preview still works exactly like before.

Run it, then try the JS tab: change the headline text, or ask for paragraphs.length after adding a <p> in the HTML tab.

web page — live previewsandboxed
Run rebuilds the page

Two things just happened that no console-only playground could show. Your code changed the page — the headline you see was rewritten by JavaScript after the HTML said Loading…. And document.querySelectorAll("p") walked the DOM tree the parser built from the HTML tab. Next lesson digs into those selection tools properly.

Scripts run where the parser meets them

Back in the pipeline, there is a trap waiting. When the parser meets a classic <script> tag, it stops parsing, runs the script, and only then continues building the DOM. So placement decides what your script can see:

<body>
  <script>
    // runs BEFORE the h1 below exists in the DOM
    // document.querySelector("h1") here → null
  </script>
  <h1>Too late for the script above</h1>
</body>

A script at the top of <body> looking for an element below it finds null — the element literally does not exist yet. The playground above avoids this the classic way: its JS runs as a script at the end of body, after the whole tree exists. Real pages have three modern tools for the same problem, all written on the script tag in <head>:

  • <script defer src="app.js"> — download in parallel, run after the DOM is complete, in order. The everyday default.
  • <script async src="analytics.js"> — download in parallel, run whenever ready, order not guaranteed. For scripts that don't care about your DOM or each other.
  • <script type="module" src="app.js"> — module scripts defer automatically (and get import/export, from lesson 19.1's world).

If you remember one rule: give your element-touching scripts defer, or put them at the end of <body> — both mean "the tree is ready when I run."

The globals of the page

Three names anchor everything you will do in this part:

  • window — the global object of the page: every page API hangs off it, and top-level var/function declarations land on it. window.setTimeout and setTimeout are the same function.
  • document — the entry point to the DOM tree: document.querySelector, document.title, document.body.
  • globalThis — the standard, environment-neutral name for the global object. In a page it is window; in the worker-style playgrounds of Parts I–III there was no window, which is why the course used globalThis there.

Try it in the playground above: add console.log(globalThis === window); to the JS tab and run — true, in any page.

You now know what the browser does with your file, why script timing matters, and you have a playground with a real page in it. Next: querySelector and friends — finding exactly the elements you want to change.

Checkpoint

Answer all three to mark this lesson complete

+50 XP on completion