The Document Object Model (DOM)

The Document Object Model (DOM) is an object-oriented representation of a web page, based on a treeA way of structuring nodes. representation of the HTML document. Each nodeA part of a tree. in the tree represents information about the document, and the way nodes are connected to each other by edgesA connection between nodes in a tree. follows its structure. For example, since the head elementAn HTML element that gives information about the page, tag name <code>head</code>. and body elementAn HTML element that contains all the content of the page, tag name <code>body</code>. are placed inside the html elementA part of the content of a web page. in the document, the head element and body element are the childrenA node "below" a node in a tree, connected by an edge. of the html element, as depicted below.

tree representation

Each node of the tree is an objectA "bundle" of values. in the DOM, for which there are propertiesA slot for one of the values bundled in an object. and methodsA function associated with a class.. 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 nodesA part of a tree. 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 attributeExtra information added to an element. of an element
  • comment node; one for each commentInformation written for humans, ignored by the computer.

We will use the terms node and object interchangeably.