What is the DOM

You know JavaScript — variables, functions, arrays, objects. But so far everything we wrote ran in isolation. No web page, no buttons, no visual output beyond console.log.

The DOM is what connects JavaScript to the browser. It is what lets you click a button and see something change, type in a form and get a response, or load a page and watch content appear dynamically.

Without the DOM, JavaScript is just logic. With the DOM, it becomes a living, interactive web page.

What Does DOM Stand For

Document Object Model.

When a browser loads an HTML file, it does not just display it — it reads every tag and builds a structured model of the entire page in memory. That model is the DOM.

<!DOCTYPE html>
<html>
  <head>
    <title>DocsHub</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Learn JavaScript.</p>
  </body>
</html>

The browser reads this and builds a tree of objects — one object for each element. This tree is the DOM.

The DOM Tree

Every element in an HTML page becomes a node in the DOM tree. Nodes are nested inside each other — exactly like the HTML structure.

document is the root — the entry point to the entire page
Every HTML tag becomes an element node
Text inside a tag becomes a text node
The whole structure is called the DOM tree

The DOM is Not Your HTML File

This is important to understand. The DOM is not your HTML file. It is the browser's live representation of the page in memory.

When JavaScript changes the DOM — adds an element, removes one, changes text — the page updates instantly. The HTML file on disk stays the same. The DOM in memory changes.

// This changes the DOM — the page updates immediately
document.querySelector("h1").textContent = "Hello, Ali!";

// The original HTML file is untouched

This is how every modern web app works — React, Vue, Angular — they all manipulate the DOM to update what you see.

The `document` Object

JavaScript accesses the DOM through a global object called document. It represents the entire page and is your starting point for everything.

console.log(document);           // the entire page as an object
console.log(document.title);     // "DocsHub" — the page title
console.log(document.URL);       // current page URL
console.log(document.body);      // the <body> element
console.log(document.head);      // the <head> element

Every method you will use to select, create, and modify elements lives on document.

What You Can Do With the DOM

JavaScript can do anything to a page through the DOM:

Select elements — find any element on the page by tag, class, id, or any CSS selector.

const heading = document.querySelector("h1");
const button = document.getElementById("submit-btn");

Read and change content — update text, HTML, attributes.

heading.textContent = "Welcome, Ali!";
button.disabled = true;

Change styles — update CSS directly from JavaScript.

heading.style.color = "blue";
heading.style.fontSize = "2rem";

Add and remove elements — create new elements and insert or delete them.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This was added by JavaScript.";
document.body.appendChild(newParagraph);

Listen for events — respond to clicks, key presses, form submissions, mouse movements.

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

All of this is covered in detail across the rest of this section.

The DOM and JavaScript Are Separate

One important thing to understand — the DOM is not part of JavaScript itself. JavaScript is a language. The DOM is a browser API — a set of tools the browser gives to JavaScript so it can interact with the page.

This is why DOM code does not work in Node.js — there is no browser, no page, no DOM. document simply does not exist there.

// In the browser — works
console.log(document.title);

// In Node.js — crashes
// ReferenceError: document is not defined

JavaScript is the language. The browser is the environment. The DOM is the bridge between them.

How to Practice

Every example in this section runs directly in the browser. You do not need any setup.

Create a simple HTML file with a <script> tag
Open it in the browser
Press F12 to open DevTools
Use the Console tab to run JavaScript live
Use the Elements tab to see the DOM tree update in real time

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello</h1>
    <button id="btn">Click me</button>

    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        document.getElementById("title").textContent = "You clicked!";
      });
    </script>
  </body>
</html>

Open this in a browser, click the button, and watch the heading change. That is the DOM in action.

All DOM examples in this section assume you are working in a browser environment with an HTML file. If you are using an online editor, try codepen.io or jsfiddle.net — both give you HTML, CSS, and JavaScript panels side by side.

Summary

The DOM is the browser's live, in-memory representation of an HTML page
The browser reads HTML and builds a tree of nodes — one for each element and text
JavaScript accesses the DOM through the global document object
The DOM is not your HTML file — changes to the DOM update the page instantly without touching the file
Through the DOM, JavaScript can select elements, change content, update styles, create or remove elements, and respond to user events
The DOM is a browser API — it does not exist in Node.js

What is the DOM

On this page