DOM - Document Object Model overview

What is DOM? According to W3C:

"DOM allows programs and scripts to dynamically access and update the content, structure and style of XML or HTML documents".

The programmer is provided with objects, that have properties, methods and events that interface the XML or HTML document.
To summarize:

1. A set of objects,
2. a model of how these objects can be combined,
3. and an interface for accessing and manipulating them.

DOM is a W3C Recommendation, thus the specification is final and can be implemented without fear of things changing.

DOM history

The first description of the interface was part of HTML 4 and one can speak of DOM Level 0 and date of 1997.
The advent of Dynamic HTML in 1997 on Netscape and Internet Explorer resulted in a definition known as DOM intermediary.
The W3C was founded in 1994 to promote Web standards. In 1998 it established the first specification called DOM Level 1.
DOM Level 2 was introduced in 2000.

XML and HTML DOM

The core (XML) DOM provides:

1. Fundamental interfaces to represent any structured document.
2. Extended interfaces to represent XML documents.

The HTML version must implement both the XML and une extended interface to represent HTML documents.

Related terms

DOM implementation

Program that takes a document, XML or HTML, already parsed, and makes it available by the dom interface.

DOM application

A program that can access the document via the DOM interface.
A script inside a web page is a DOM application.

IDL (Interface Definition Language)

The definition of the interface for DOM is written in a language named Object Management Group Interface Definition Language (OMG IDL).
Specific bindings exists for ECMAScript, Java, and can be written for any languages.

Objects and methods

The document object

This is a DOM object corresponding to the current page. However some tags as <iframe> <browser> and <tabbrowser> can introduce other documents into the same window.

Essential methods and attributes of document:

• getElementById(x). Returns the tag whose ID is x.
• innerHTML. Attribute to read or assign the content of an ID.
• getElementsByTagName(x). Returns a NodeList, (a list of Node), created for tags whose class (or tag name for XML) is x.
• item(n). Returns the n element inside a NodeList.
• firstChild. Points out the first element inside a Node that is returned by item(n).
• nextSibling. Points out the next element in the Node. Should be used after firstChild.

Essential dynamic methods of document:

• createElement(type, name). Create an element, return an Element object (a type of Node).
• appendChild(Node). Add x to the element, as last child.
• insertBefore(Node, Node).
• removeChild(Node).
• setAttribute(name, value). Add attribute to the element.

How to use DOM with JavaScript?

DOM is an API, a set of objects with their attributes and methods, an interface for JavaScript.

var anchorList = document.getElementsByTagName("a") ; 
for(var i = 0; i < anchorList.length; i++)
{ 
 alert("href: " + anchorList[i].href + "\n"); 
} 

This example parses a web page to find links and display them.

• document is an object defined in core DOM to represent the document.
• getElementsByTagName is a method of the object wich builds an array from each tag matching the parameter, "a" for instance.
• href is a property of HTML DOM.
• anchorList is a declared variable.

DOM and SAX (Simple Api for XML)

DOM and sax are two means to parse an XML document and use the content. DOM is the simplest one, the more intuitive. Sax is faster and uses less memory.

• DOM loads the document in memory as a tree and allows the programmer to apply functions on the elements of the tree.
• SAX is event oriented. It associates methods to tags, that are activated when the tags are accessed. Elements are read in sequence, once. You need to define your own document model, while DOM provide one.

If you want to process a document with some script, DOM is better.

DOM levels

There are several levels in the DOM specification:

DOM 1
Level 1 allows accessing the content of an XML or HTML document.
Core DOM Level 1 specification is the first standard.

DOM 2
DOM Level 2 adds many methods to interfaces already defined in level 1. Among others getElementById that is often used, XML name spaces, filtered views, ranges, events, etc.
HTMLDocument and XMLDocument supplements are specific to HTML page and XML files.

DOM 3
DOM Level 3 adds new interfaces, new types of data and extra methods to DOM 2 interfaces.
A Query interface is expected in that one or a further level.
Load/Save are expected in the level 3. For more infos about the changes in level 3, click here

References

• DOM FAQ at W3C. This page should answer most of your questions. Otherwise try FAQ here.
• Example of DOM usage. Replacing images in a web page.
• DOM 3 specification. Working draft of the level 3.