Understanding the DOMLesson 1.1

What is the DOM and how does a browser build it

DOM definition, document object, node tree, element nodes, text nodes, browser parsing

What Is the DOM?

The Document Object Model (DOM) is a live, in-memory representation of your HTML page. When a browser loads HTML, it parses each tag and builds a tree of nodes. JavaScript can read and modify this tree at any time.

The root of every tree is document. Every HTML element becomes an Element node. Text inside an element becomes a Text node. Attributes live directly on their element nodes — not as separate children.

The document Object

You access the entire tree through the global document object, which the browser creates automatically.

console.log(document.title);       // page title string
console.log(document.documentElement); // the <html> element
console.log(document.body);        // the <body> element

Why This Matters

Every DOM method — selecting, creating, or deleting elements — works on this tree. Understanding nodes prevents confusion later when methods return unexpected results like null or a NodeList instead of an array.

The DOM is live: changes you make in JavaScript immediately affect what the user sees. There is no separate compile or refresh step.