The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A web page is a document that can be either displayed in the browser window or as the HTML source. The DOM is an object-oriented representation of that same document, which can be modified with a scripting language like JavaScript.

1. The DOM Tree Structure

When a browser loads an HTML document, it creates a hierarchical model of the page. This is known as the DOM Tree. Every item in the HTML—the document itself, the tags, the text inside the tags, and even the comments—is a Node in this tree.

  • Document Node: The root of the entire tree.
  • Element Nodes: Represent HTML tags (e.g., <body>, <div>, <h1>).
  • Text Nodes: The actual text inside the tags.
  • Attribute Nodes: Attributes like class, id, or src (though in modern DOM, these are often accessed as properties of the element nodes).
  • Comment Nodes: HTML comments (“) are also part of the DOM tree.

2. JavaScript and the DOM: The Connection

While the DOM is often associated with JavaScript, it is technically a standalone API. However, in the context of web development, JavaScript is the primary tool used to “talk” to the DOM. JavaScript doesn’t “know” what an HTML tag is; it only understands the objects the browser provides.

The window and document Objects

  • window: The global object representing the browser tab. It contains the DOM, the browser’s history, the screen, and more.
  • document: A property of the window object. It is the entry point into the web page’s content.

3. Core DOM Operations

To interact with a web page, you generally follow a three-step workflow: Select, Manipulate, and Listen.

A. Selecting Elements

To change something, you first have to find it. Modern JavaScript provides several ways to query the DOM:

Method Description
getElementById() Finds a single element by its unique ID.
querySelector() Uses CSS selectors to find the first matching element.
querySelectorAll() Uses CSS selectors to find all matching elements (returns a NodeList).
getElementsByClassName() Finds elements by their class name.

B. Manipulating Elements

Once you have a reference to an element, you can change its properties, styles, or content.

JavaScript
const title = document.querySelector('h1');

// Changing content
title.textContent = "Hello, Universe!";

// Changing style
title.style.color = "royalblue";

// Changing attributes
title.setAttribute('class', 'main-header');

C. Creating and Removing Nodes

The DOM is dynamic. You can build entirely new sections of a page on the fly.

JavaScript
// Create
const newParagraph = document.createElement('p');
newParagraph.textContent = "I was born from JavaScript!";

// Append
document.body.appendChild(newParagraph);

// Remove
newParagraph.remove();

4. DOM Events: Making the Page Interactive

The DOM allows you to react to user actions. This is handled through Event Listeners. An event can be anything from a mouse click or a key press to the page finishing its loading process.

JavaScript
const btn = document.querySelector('#action-btn');

btn.addEventListener('click', (event) => {
    console.log("Button was clicked!");
    btn.classList.toggle('active');
});

Categorized in:

JS DOM,