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.

Call document.getElementById("id") (no #), which returns the matching element or null if none exists.

const element = document.getElementById("myButton");

Key characteristics:

• Returns a single element (IDs must be unique)
• Returns null if no element matches
• Fastest selection method (IDs are indexed)
• Does NOT include the # symbol (unlike CSS)

Common mistake:

// Wrong - don't use #
document.getElementById("#myButton");

// Correct
document.getElementById("myButton");