The DOM is a live, tree-structured representation of an HTML document that the browser builds so JavaScript can read and modify page content.

When a browser loads HTML, it parses it into a hierarchical tree structure where:

• Each HTML element becomes a node in the tree
• The tree starts with the document object as the root
• Parent-child relationships mirror HTML nesting

Key characteristics:

• Live representation - Changes to the DOM immediately reflect on the page
• Language-neutral interface - Though typically used with JavaScript
• Standardized by W3C - Consistent across browsers

Example structure:

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p

Tip: Think of the DOM as the "living" version of your HTML that JavaScript can read and modify.

Go deeper:

• DOM introduction (MDN) — how the browser turns HTML into a node tree your JS can reach.
• Document Object Model (Wikipedia) — the concept plus a labelled DOM-hierarchy diagram.
• DOM tree (javascript.info) — element, text and comment nodes, and how the browser fixes broken HTML.