Module 12 · Browser APIs

The DOM

Beginner11m read8m practice19m total

DOMBrowserNodesRendering

Introduction

The Document Object Model (DOM) is the browser's live object representation of an HTML page. JavaScript does not edit the original HTML file directly; it reads and mutates a tree of objects such as document, Element, Text, and Node.

This topic gives you the interview mental model for selecting, creating, inserting, removing, and updating nodes without accidentally causing security or performance problems.

Why This Matters

DOM fluency separates language-only JavaScript knowledge from frontend engineering. If you can explain the DOM as a tree, attributes vs properties, and why repeated layout reads can be expensive, you can reason through most browser UI questions confidently.

Theory

The DOM is a tree

The browser parses HTML and creates a tree. The document is the root, element nodes are branches, and text nodes are leaves. JavaScript mutates that live tree, then the browser updates what the user sees.

Concept	Meaning	Common APIs
`Document`	Whole page	`querySelector`, `createElement`
`Element`	A tag such as `button` or `main`	`classList`, `dataset`, `setAttribute`
`Text`	Text inside an element	`textContent`
`DocumentFragment`	Temporary off-tree container	Batch inserts before one live-tree write

Selecting nodes

Use querySelector for the first match and querySelectorAll for a static list. Scope queries to a known container when possible: form.querySelector('[name=email]') is more predictable than searching the whole page.

Creating and updating

A safe workflow is: create nodes, set textContent, set classes or attributes, then append once. Prefer textContent for untrusted text because innerHTML parses markup and can create XSS bugs if the input is not trusted and sanitized.

Attributes vs properties

Attributes are string values in markup. Properties are live JavaScript fields on DOM objects. For an input, the value attribute is the initial value, while input.value is the current value after the user types. Use properties for live state and attributes for metadata, accessibility, and initial configuration.

Reflow and repaint intuition

DOM changes can trigger style recalculation, layout, paint, and compositing. Reading layout values after writing styles can force layout immediately. Compute data first, batch DOM reads together, then batch DOM writes together.

Visual Diagrams

DOM tree mental model

Document
  html
    head
      title
        Text: ElevateIQ
    body
      main#app
        h1
          Text: Browser APIs
        ul.lesson-list
          li[data-id=dom]
            Text: The DOM
          li[data-id=events]
            Text: Events

The DOM is a live tree of node objects that JavaScript can traverse and mutate.

Rendering work after a mutation

DOM write
  |
  v
Style recalculation
  |
  v
Layout if geometry changed
  |
  v
Paint if pixels changed
  |
  v
Composite final layers

Not every change runs every step, but geometry changes are usually more expensive than text-only or transform-only changes.

Code Examples

Select and update safely

Use textContent, classList, and dataset for common UI updates without parsing HTML.

Loading…

Create and insert nodes with a fragment

Build multiple nodes off-tree, then replace the visible list in one operation.

Loading…

Attribute vs property on an input

The attribute is initial markup; the property reflects current runtime state.

Loading…

Coding Exercises

Plan a minimal list patch

Medium

Write planListPatch(currentIds, nextIds) that returns operations before any DOM mutation. Return remove:<id> for ids missing from the next list and add:<id> for ids missing from the current list.

Interview Questions

1What is the DOM, and how is it different from HTML?

HTML is source text. The DOM is the browser's live object tree created from that text. JavaScript reads and mutates DOM nodes, and the browser updates rendering from that live tree.

Asked at:MicrosoftGoogleMeta

Follow-ups

What is a `DocumentFragment`?
Why is `textContent` safer than `innerHTML`?

2Explain attributes vs properties with an input element.

The value attribute is the initial markup value. The input.value property is live runtime state and changes as the user types. Use properties for current state and attributes for metadata or initial configuration.

Asked at:AmazonApple

Quiz

1. Which API is usually safest for inserting untrusted plain text?

2. Why use a `DocumentFragment` when rendering many items?

Summary

The DOM is the browser's live object tree for a document.
Use scoped selectors, node creation, and `textContent` for safe updates.
Attributes are markup/configuration; properties often represent live state.
Batch DOM reads and writes to reduce unnecessary rendering work.

Cheat Sheet

Select: querySelector, querySelectorAll.

Create: createElement, createTextNode, createDocumentFragment.

Insert: append, prepend, before, after, replaceChildren.

Remove: remove.

Safe text: prefer textContent for untrusted strings.

Performance: compute first, batch reads, batch writes.