1. Introduction
The Document Object Model (DOM) is a programming interface for HTML documents. When a browser loads a web page, it parses the HTML and builds an in-memory tree of objects called nodes — one for every element, attribute, and piece of text. JavaScript uses the document object as the entry point into this tree to read and change what the page shows, without needing to reload the page.
Cricket analogy: Just as a scorer builds a ball-by-ball tree of overs, deliveries, and outcomes from the raw match feed, the browser parses raw HTML into an in-memory tree of nodes that JavaScript can read and change via document.
The DOM is not the HTML file itself. It is a dynamic, object-oriented representation of the page's current state — one that can be inspected and mutated at runtime, and that updates automatically as scripts run.
Cricket analogy: The scorecard printed in the newspaper is frozen, but the live scoring app's internal model updates ball by ball as the match happens; the DOM is that live, mutable model, not the static HTML file that was first sent.
2. Syntax
// The document object is the root entry point into the DOM tree
console.log(document); // the entire HTML document as a tree
console.log(document.documentElement); // <html> element
console.log(document.body); // <body> element
console.log(document.title); // the page <title> text
// Walking the tree with node relationships
const body = document.body;
console.log(body.parentNode); // <html>
console.log(body.childNodes); // NodeList of all child nodes (incl. text/whitespace)
console.log(body.children); // HTMLCollection of element children only
console.log(body.firstElementChild);
console.log(body.nextSibling);3. Explanation
Every HTML tag becomes a 'node' object in the DOM tree, and nodes are connected through parent/child/sibling relationships, mirroring the nesting of the original markup. The document object sits at the top and exposes the whole tree.
Cricket analogy: Every ball bowled becomes an entry in the scorecard tree connected to its over (parent) and the next ball (sibling), mirroring how every HTML tag becomes a node connected by parent/child/sibling relationships under document.
Crucially, the DOM is 'live': if JavaScript adds, removes, or edits a node, the browser immediately re-renders to reflect the new tree — there is no separate 'HTML source' being consulted. Viewing 'page source' shows the original HTML sent by the server, while DevTools' Elements panel shows the current DOM, which can differ significantly after scripts run.
Cricket analogy: A live scoreboard re-renders instantly the moment a run is added or a wicket falls, with no need to reprint the original scoresheet; likewise the DOM re-renders immediately whenever JavaScript changes a node, unlike the static HTML source.
The DOM also standardizes node types: Element nodes (tags), Text nodes (raw text, including whitespace between tags), Comment nodes, and the Document node itself. This is why childNodes (all node types) often returns more entries than children (elements only).
Cricket analogy: A scorecard distinguishes the batter's name (an 'element'), the raw over-by-over commentary text ('text nodes'), and umpire remarks ('comments'), just as the DOM standardizes Element, Text, Comment, and Document node types.
Gotcha: 'View Page Source' (Ctrl+U) always shows the original server-delivered HTML, never DOM changes made by JavaScript. To see the live DOM, use the browser DevTools 'Elements'/'Inspector' panel instead — it reflects real-time mutations.
4. Example
<!-- index.html -->
<body>
<div id="app">
<p>Original text</p>
</div>
<script src="app.js"></script>
</body>// app.js
console.log(document.body.children.length); // element children of <body>
const app = document.getElementById('app');
console.log(app.children.length); // 1 -> the <p>
console.log(app.childNodes.length); // often 3: whitespace text, <p>, whitespace text
// Mutate the DOM at runtime
const newPara = document.createElement('p');
newPara.textContent = 'Added by JavaScript';
app.appendChild(newPara);
console.log(app.children.length); // now 2
// Note: view-source of index.html on disk still shows only the original <p>5. Output
Console output:
2 // document.body.children.length (div#app + script)
1 // app.children.length before mutation
3 // app.childNodes.length (text, <p>, text)
2 // app.children.length after appendChild
Live DOM (DevTools Elements panel) after script runs:
<div id="app">
<p>Original text</p>
<p>Added by JavaScript</p>
</div>
View Page Source (Ctrl+U) still shows only:
<div id="app">
<p>Original text</p>
</div>6. Key Takeaways
- The DOM is a live, in-memory tree of node objects built from HTML — not the HTML source text.
documentis the root entry point for reading and manipulating the page.childNodesincludes text/comment nodes;childrenincludes only Element nodes.- DOM changes made by JavaScript render immediately but never alter the original HTML source file.
- Use DevTools Elements panel (not 'View Page Source') to inspect the current, live DOM.
Practice what you learned
1. What does 'View Page Source' show in a browser?
2. Which object is the root entry point to the DOM tree in JavaScript?
3. What is the key difference between `childNodes` and `children`?
4. Why might `body.childNodes.length` be greater than `body.children.length`?
5. What happens to the DOM when JavaScript calls `appendChild()`?
6. Which node type represents raw text content between tags in the DOM?
Was this page helpful?
You May Also Like
DOM Manipulation in JavaScript
Learn how to select, create, modify, and remove DOM elements using JavaScript, and the key differences between the main selector APIs.
Event Handling in JavaScript
Learn how to listen for and respond to user interactions and browser events using addEventListener and the event object.
Event Bubbling and Capturing in JavaScript
Understand the two phases of DOM event propagation — capturing (top-down) and bubbling (bottom-up) — and how to control them.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics