DOM Icon Document Object Model Web Page Data Structure

The Document Object Model (DOM) is a W3C standard method for representing the elements of web page into a tree-like data structure. The DOM maps the document's contents in a way that allows programming languages to access and modify the contents dynamically. The DOM API was designed to be independent of any particular programming language. However JavaScript is the scripting language most commonly used to interact with the DOM. Reference sites for DOM information are Mozilla Developer Network and SitePoint.

Top | BOM | Structure | Objects | API | Events | Versions | Browsers | Layout Engines

Browser Object Model Everything Provided by Browser

The DOM is an important part of the larger Browser Object Model (BOM). The BOM is a tree-like hierarchy of objects of everything provided by a browser.

Browser Object Model

The top level BOM object is the Window object which corresponds to an open window in a browser. The children of the Window Object are:

1. History Object (contains URL history)

2. Navigator Object (contains information about the current browser)

3. Location Object (contains current URL information)

4. Screen Object (contains window information, such as dimensions)

5. Document Object (the subject of this page)


DOM Structure Everything is a NodeDocument Object Model

The DOM standard labels everything in an HTML document as a node and represents the document as a Node Tree. The top (root) node in the tree structure is the <html> data, which is all the data in the document. Two immediate children of the root node are the <head> node (containing non-display data) and the <body> node (containing display data).

The <head> node contains nodes for HTML elements such as <meta> (data used by search engines and screen readers), <link> for linking to external data files such as Cascading Style sheets, and <script> for containing inline JavaScript code or links to external JavaScript files.

The <body> node contains all the information used in displaying the content on the web page. This information is stored in Element Nodes (containing the HTML markup) ,Text Nodes (containing the contents of the data displayed), and Attribute Nodes (characteristics of the node). Developers use an Application Programming Interface (API) to access and manipulate the information stored in these nodes as a way to dynamically change the web page contents.

DOM Objects Properties and Methods

DOM nodes are objects with properties that contain information about the node. The nodes also have methods which are actions that can be performed on the nodes.

Some of the common node properties are:

Some of the common node methods are: DOM API Dynamic HTML Modification

The DOM API can be used by JavaScript to dynamically modify HTML elements by:

  1. Changing Content
  2. Changing CSS Style
  3. Changing Attributes
  4. Creating a New Element
  5. Removing an Existing Element
  6. Changing Event Handlers

Change the text contents of a node:

<script>
   document.getElementById("msgTxt").innerHTML="New text!";
</script>

Change the styling of a node:

<script>
   document.getElementById("outDiv").style.color="blue";
</script>

Create a new node:

<script>
   var newHeader=document.createElement("h1");
   var node=document.createTextNode("New header text.");
   para.appendChild(node);
   var element=document.getElementById("outDiv");
   element.appendChild(newHeader);
</script>

More information about using scripts to modify the DOM can be found on the JavaScript and jQuery pages.


Events and the DOM Event Listeners

The earliest method for capturing events was a specification inside the element definition, such as:

<script>
   function function1() {
      alert("Function 1 Executed.");
   }
</script>

<input type="button" value="Button 1" onClick="function1();"></input>

This simple method of capturing events lacks the flexibility required of more complex web pages. Inconsistences can appear across browsers when trying to have more than one HTML element detect the same event. DOM 2 created "event listeners" to handle multiple events for a single event. The syntax for adding an event listener is:

elementReference.addEventListener("eventName", functionCall, phase);

The third parameter (phase) indicates the order in which multiple nested events should be detected.1Phases are defined as:
1. Bubbling Phase (phase parameter = false, so capture is off.)
The process by which an event can be handled by one of the target's ancestors after being handled by the event target.

2. Capture Phase (phase parameter = true, so capture is on.)
The process by which an event can be handled by one of the target's ancestors before being handled by the event target.
An example of the event listening code created in DOM 2 is:

// The function to trigger.        
function switchMusic() {  
}

// Event listener to trigger function.      
var playbutton = document.getElementById("playButton");
playbutton.addEventListener("click", switchMusic, false);        

Note: IE8 and earlier use a different method for adding events. Below is the code to support all browsers include IE8 and earlier:

<input id="SubmitButton" type="button" value="button" />

var button = document.getElementById("SubmitButton");
if (document.addEventListener) {
  // Most browsers.
  button.addEventListener('click', function() { alert('Clicked Button'); }, false);
} else {
  // IE 8 and earlier.
  button.attachEvent('onclick',function() { alert('Clicked IE Button'); });
}

More information about using scripts to capture events can be found on the JavaScript and jQuery pages.


DOM Versions W3C Standards

Today developers can use the DOM API to traverse the DOM and retrieve, remove, change, and add HTML elements on a web page. However when the early browser first incorporated the scripting languages JavaScript and JScript, the DOM only provided a limited capability for creating web pages with client-side interactivity. This early, limited capability has become known as DOM Level 0. In June 1997 the Ecma International standards organization published their ECMA-262 specification for a standardized version of the JavaScript/JScript languages they called ECMAScript. Then in late 1998 the W3C released their standardized version of the DOM known as DOM Level 1. The W3C further released DOM Level 2 in late 2000 and DOM Level 3 in 2004.

DOM Versions
DOM Level Date
0 1996
1 1998
2 2000
3 2004


DOM Representations Web Browsers and Layout Engines

Web browsers contain layout engines that handle creating the DOM from the document HTML. The different layout engines vary in the degree to which they follow the DOM standards. Fortunately JavaScript libraries such as jQuery are available to help programmers handle these differences. Listed below are the major web browsers and their associated layout engines.

Web Browsers
Web Browsers by Release Date
*No Longer Supported
Browser Developer Web Site Release Date
Mosaic* NCSA NCSA Mosaic Project April 22, 1993
Navigator* Netscape Communications Netscape Communications December 15, 1994
Opera Opera Software Opera Developer April 10, 1995
Internet Explorer Microsoft Microsoft Support August 16, 1995
Safari Apple Safari Support January 7, 2003
Firefox Mozilla Foundation Mozilla Support November 9, 2004
Chrome Google Chrome Support September 2, 2008


Layout Engines
Layout Engines for Browsers
Layout Engine Browsers Web Site
Gecko Firefox, Navigator 6.0+ Mozilla Developer Network - Gecko
Presto Opera Opera Presto Support
Trident Internet Explorer 4.0+ Microsoft Developer Network
WebKit Safari, Chrome WebKit Open Source Project


Top | BOM | Structure | Objects | API | Events | Versions | Browsers | Layout Engines
References
  1. World Wide Web Consortium, Document Object Model. Retrieved January 18, 2013.
  2. Mozilla Developer Network - DOM Event (Mozilla Developer Network). Retrieved February 20, 2013.
  3. HTML DOM Events (w3shools - HTML DOM Events). Retrieved February 20, 2013.
  4. JavaScript Tutorial - DOM Events (Mark "Tarquin" Wilton-Jones.). Retrieved February 20, 2013.
  5. JavaScript Kit - DOM Reference JavaScript Kit. Retrieved February 20, 2013.
  6. Diagrams Drawn with Gliffy Gliffy Online Diagram Tool.