The DOM (Document Object Model) is the browser's in-memory representation of an HTML page — a tree of objects, where every element, attribute, and piece of text becomes a "node" you can access and manipulate with JavaScript. When you write document.getElementById("title"), you're reaching into this tree to grab a specific object that represents a real element on the page.

Understanding the DOM is the foundation of all front-end JavaScript: it's what makes a web page interactive instead of a static document, letting your code read what's on the page, change it, and react to what the user does.

HTML vs the DOM

It helps to think of these as two separate things. The HTML file is the text you write; the DOM is what the browser builds from it after parsing that text. Consider this HTML:

<body>
  <h1 id="title">Welcome</h1>
  <p class="intro">This is a paragraph.</p>
</body>

The browser turns this into a tree: document is the root, with a body node containing an h1 node and a p node, each with their own properties like id, className, and textContent. JavaScript interacts with this tree, not the original HTML text.

The document Object

document is the entry point to the entire DOM tree — every method you use to find or create elements starts from it:

console.log(document.title);        // the page's <title>
console.log(document.body);         // the <body> element
console.log(document.URL);          // the current page's URL

const heading = document.getElementById("title");
console.log(heading.textContent);   // "Welcome"

Output:

Welcome

Reading and Changing the Page

Once you have a reference to an element, you can both read its current state and change it — and the moment you change it, the browser re-renders the visible page to match:

const heading = document.getElementById("title");

heading.textContent = "Welcome Back!";  // changes the visible text instantly
heading.style.color = "teal";            // changes its visible color

Running this updates the heading on the page itself — no page reload needed, which is the core idea behind every interactive website you've ever used. This introduction covers the concept; the actual methods for selecting and changing elements (querySelector, innerHTML, and more) are covered in detail in DOM manipulation, and responding to clicks and other user actions is covered in event listeners.