Document Object Model

Introduction

The document object model (DOM) is an application programming interface (API) developed by the W3C which allows Web developers to manipulate a plethora of Web browser objects programmatically with a scripting language; in Web development that most commonly means JavaScript. The most recent specification is the W3C DOM Level 3. The W3C's official definition reads "the Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page."

Figure 1: The Official W3C DOM Level 3 architecture (namespace).

The DOM as the W3C sees it, is a much broader and more abstract view of things, as shown in figure 1. When it comes to Web development the HTML DOM represents a Web browser displaying an HTML document type as shown in figure 2.

Image showing the DOM tree. — Figure 2: The HTML DOM.

As you can see in the image above the organizational structure of the DOM represents the document's HTML elements as objects in a hierarchical tree structure, also known as an object tree.

Figure 3: The DOM tree represented as encapsulated objects.

Note: As a Web developer it is important to know that document objects can only be referenced after the browser has finished loading the page. Any page that references a document object before the page is loaded will return an error because those objects do not yet reside in memory.

Object Names

The table below contains a list of the DOM's root and top level objects with a brief description of each.

Object Name	Description
window	The browser window and the root level object of the DOM tree.
document	The Web document displayed in the window
document.body	The body of the Web document displayed in the browser window
event	Events or actions occurring within the browser window
history	The list of previously visited Web sites within the browser window
location	The URL of the document currently displayed in the browsers window
navigator	The browser itself
screen	The screen displaying the document

Object Collections

The DOM uses the same dot notation format as many modern object-oriented programming languages, e.g. object.propertyName, object.objectType, object.methodName, object.eventType. In the table below object.objectType is used to retrieve a collection of objects of a particular type. When the type is a group of objects like anchors an array of all the anchors in the document are contained in the anchors collection. To reference a single item in the list you would use document.anchors[indexValue] where indexValue is a number between 0 and document.anchors.length.

Object Collection	Description
`document.anchors`	All anchors marked with <a> tag and includes a name attribute
`document.applets`	Al applets
`document.embeds`	All embeds elements
`document.forms`	All Web forms
`document.form.elements`	All elements within a specific form
`document.images`	All inline images
`document.links`	All links marked with an <a> tag and includes an href attribute
`document.plugins`	All plug-ins in the document
`document.stylesheets`	All style sheet elements
`navigator.plugins`	All plug-ins supported by the browser
`navigator.mimeTypes`	All mime-types supported by the browsers
`windows.frames`	All frames within the browser window

In order to parse through the collection one item at a time you could use a for loop as follows:

            for (var i = 0; i < document.links.length; i++) {
                     console.log(document.links[i]);
            }

DOM Scripting

Web developers need to be able to successfully manipulate the structure, content, and formatting of an HTML page with a scripting language like JavaScript this is easily accomplished once you have an understanding of how Web browsers arrange the html elements of a Web page into a hierarchical structure of nodes.

The following two graphics illustrate how this works. First, the code for the Web page is shown, it is followed by the DOM view of the Web page - a hierarchical arrangement of nodes.

The Code View of a Web Page

<!DOCTYPE html>

<html>

<head>

<body>

<label for="demoTextBox">Demo Label</label>

</form>

</body>

</html>

The DOM View of the Same Web Page

Notice how the outermost element in the page, the <html> element, is the root of the DOM tree and is represented as the document object in the "document object model". Inside of the <html> element are two child nodes, the <head> and the <body> elements. The <head> element has a child node, <title>, and <title> has a child node which represents the literal text which is typed inside the <title> element. The <body> element has two child nodes, the <h1> and the <form> elements. The <h1> element has a child node - its literal text and the <form> has three children, <label>, <input> and the <span> elements. The <label> and <span> elements each have a literal string for a child; the <input> element has no children.

Figure 4: DOM view of an HTML page.

DOM Event Flow

depiction of DOM event bubbling. — Figure 5: DOM Event Flow

Under the W3C event model, the progress that an event makes through the DOM is split into three phases:

A capture phase as the event moves down the object hierarchy.
A targeting phase in which the event reaches the object hierarchy
A bubbling phase in which the event moves back up the object hierarchy

The W3C event model is particularly powerful because it allows you to run a function that responds to an event at any phase in this process.

Unobtrusive JavaScript

Currently the preferred method for incorporating DOM scripting into your HTML page(s) is to do so without embedding the JavaScript code into the HTML document, instead locating all the JavaScript code in external JavaScript files and libraries; this includes event listeners like onload and onclick.

Attaching and Listening for Events

EventTarget.addEventListener()