JavaScript Tutorials

The Document Object Model

The Document Object Model or DOM is the representation of the objects that make up the structure of a document on the web. The Document Object Model is an application programming interface (API) for manipulating HTML documents.

Understanding the DOM is the key to being able to manipulate the text or HTML in a web page. Using the DOM, you can create animations, update data without refreshing web pages, move objects around in a browser, and much more.

The Document Object Model is the interface for JavaScript to talk to and work with HTML documents inside of browser windows. When a web page is loaded, the browser creates a Document Object Model of the page. The DOM represents an HTML document as a hierarchy of nodes. The DOM can be visualized as an inverted tree, with each part of the HTML document branching off of its containing part.

A DOM tree is made up of individual components, called nodes. The main node, from which every other node springs, is called the document node. The node under the document node is the root element node. For HTML documents, the root node is HTML. After the root node, every element, attribute, and a piece of content in the document is represented by a node in the tree that comes from another node in the tree.

The DOM has several different types of nodes:

  • Document node: The entire HTML document is represented in this node
  • Element nodes: The HTML elements
  • Attribute nodes: The Attributes associated with elements
  • Text nodes: The text content of elements
  • Comment nodes: The HTML comments in a document

Listing 10-1 is the markup for a web page. The DOM representation is shown in the next figure