Ajax JavaScript CSS HTML 5 Firefox

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:

Essential dynamic methods of document:

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.

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.

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

© 2009-2012 Xul.fr