DOM - Document Object Model
Interfacing programming languages with XML documentsby associating them with an object oriented model.
This document written from the W3C documentation.
DOM is a W3C Recommendation, thus the specification is final and can be implemented without fear of things changing.
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.
References
- Recommendation from the W3C. DOM 1 defines all the attributes and functions.
-
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.