Introduction to the DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to create web content and applications.

What is the DOM?

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. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

For example, the DOM specifies that the querySelectorAll method in this code snippet must return a list of all the (p) elements in the document:

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

A tree structure representing the HTML document.

Each element in the HTML document becomes a node in the tree.

Nodes can have properties (like content or style) and methods (like adding or removing child nodes).

How JavaScript uses the DOM:

Access elements using methods like document.getElementById or document.querySelector.

Modify element content with properties like innerHTML or textContent.

Change element styles using methods like element.style.color or with CSS classes.

Add or remove elements from the DOM using methods like appendChild or removeChild.

Why the DOM is important:

Creates dynamic and interactive web pages.

Allows for features like updating content without reloading the page, responding to user actions, and creating animations.