The Document Object Model (DOM)

The Document Object Model (DOM) is an object-oriented representation of a web page, based on a tree representation of the HTML document. Each node in the tree represents information about the document, and the way nodes are connected to each other by edges follows its structure. For example, since the head element and body element are placed inside the html element in the document, the head element and body element are the children of the html element, as depicted below.

Each node of the tree is an object in the DOM, for which there are properties and methods. Some properties are specific to particular types of nodes, as are some types of methods. Both properties and methods will be gradually introduced throughout this lesson. We will introduce methods used to navigate around the tree, extract information, and make changes to the document.

DOM objects

The DOM is made of different types of nodes (and hence different types of objects), not all of which we will discuss in detail. Here are some of the types of nodes in the DOM:

• document node; the whole document
• element node; one for each element in the HTML document
• text node; the text inside an element
• attribute node; one for each attribute of an element
• comment node; one for each comment

We will use the terms node and object interchangeably.