DOM - Document Object Model

Get Someone Else to Do IT! We Build Things!   Learn more...  

The goal

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

What are the components of DOM?

The programmer is provided with objects, that have properties, methods and events that interface the XML or HTML document.
To summarize:
- a set of objects,
- a model of how these objects can be combined,
- and an interface for accessing and manipulating them.

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 XML version must implement both the XML and fundamental interfaces.
The HTML version provides:
1) the fundamental interfaces as above,
2) extended interfaces to represent HTML documents.

How to use DOM?

By the objects and their attributes and methods.

Document

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 static methods and attributes

  • 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

  • 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.

Example of use with 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.

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.

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 level in the DOM specification:

DOM 1

Level 1 allows accessing the content of an XML or HTML document.

DOM 2

Level 2 adds:

  • XML name spaces,
  • filtered views,
  • ranges,
  • events,
  • etc.

DOM 3

The level 3 is currently in work.
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.

Tired of sifting through articles, and just want the job done! We build things... Websites, E-commerce, Back end Enterprise Level Applications, From a simple Website to Full Blown Dynamic Applications using Administrative Tools to manage the data, if you need it we can build it. Located in DFW area in Texas area and serving the surrounding Dallas, Fort Worth  metro plex areas as well.  Learn more...