Episode 1 — Fundamentals / 1.14 — DOM Manipulation

1.14.a — Introduction to the DOM in JavaScript

In one sentence: The Document Object Model (DOM) is a tree-shaped API the browser builds from your HTML so scripts can read, change, add, and remove parts of the page at runtime.

Navigation: ← 1.14 Overview · 1.14.b — DOM Structure →

1. What is the DOM?

When the browser parses HTML, it does not keep the page as a raw string of tags. It builds an in-memory tree of objects — the DOM. Each piece of the document (an element, a text run, a comment) becomes a node with properties and methods.

        document
            │
         <html>
         /      \
     <head>    <body>
                  │
                <main>
                  │
                 <p>Hello</p>

JavaScript accesses this tree through document and properties like document.body, then walks or queries from there (see 1.14.c).

2. DOM vs HTML source

HTML sourceDOM (live)
What it isText sent from server (or read from disk)Object tree in memory
Can JS change it?Not directly — changing DOM does not rewrite the .html fileYes — changes are reflected on screen
Invalid HTMLParser repairs per spec; DOM may differ from what you typedThe tree is the truth for rendering

3. Why the DOM matters for developers

  1. Interactivity — Update text, show/hide UI, validate forms without reloading.
  2. Single-page apps — Frameworks ultimately mutate (or virtualize) the DOM.
  3. Accessibility — Correct DOM updates keep focus and ARIA state coherent (advanced topic; see 1.5.e).

4. DOM and the rendering pipeline (reminder)

DOM changes can trigger style recalculation, layout, and paint (see 1.5.a). For heavy UIs, batch reads/writes and avoid thrashing — preview for later performance lessons.

5. Key takeaways

  1. The DOM is a live tree of objects representing the document.
  2. document is the global entry point from JavaScript in the browser.
  3. Changing the DOM changes what the user sees — not the original HTML file on disk.

Explain-It Challenge

Explain without notes:

  1. In one sentence: what is the DOM?
  2. If you change a paragraph’s text in JavaScript, does the .html file on the server change automatically? Why or why not?
  3. Name one user-visible effect of adding a new <li> to a <ul> in the DOM.

Navigation: ← 1.14 Overview · 1.14.b — DOM Structure →