Modelling the Document Objects

Release: 2008-01-27
Jump to Web Standards Articles TOC

DOM

In order to access parts of a webpage in a scripting or programming language to be able to manipulate the structure, the scripting or programming language has a model of objects that represent the elements, their attributes, the text values for attribute values and element content and information of the relationship of the element within the document such as its parent element. This model is the Document Object Model or DOM for short.
Currently there are three levels of the DOM, each are made up of modules. We are just going to look at the basics of DOM 1 Core and DOM 2 Core. As the most typical scripting environment that uses DOM is Netscape's JavaScript, used by most web browsers, and Microsoft's JScript, used in Internet Explorer, then this is the perspective I will have when providing examples. This articlette is not exhaustive. DOM is also used within many programming languages such as C++, Java and Perl.

The core of the model is the node object which provides core properties like nodeName, nodeValue, parentNode, namespaceURI, attributes which contains an array of attribute objects, etc. Also includes these methods hasChildNodes(), appendChild(), removeChild(), hasAttributes(). This object's properties and methods are inherited by all other objects in the model. The starting point of the webpage's model is the document object. From here you can create elements (createElement() and createElementNS()), text nodes (createTextNdode()), set attributes (setAttribute() and setAttributeNS()) and append the text nodes to the element and the element to other elements (appendChild()) to build up new structure. You can identify certain element objects by using the getElementById() and getElementsByTagName() methods.
For instance we have a <div id="me"> </div> element and we want to dynamically add a <span style="font-size: 105%; color: #0000ff;" title="DOM Level 1">Modelling the Document Objects</span> element with it:

// Create the span element

spanEl = document.createElement("span");
 


// Create the text node

spanT = document.createTextNode("Modelling the Document Objects");
 


// Appending the text node to the span object

spanEl.appendChild(spanT);
 


// Set a couple of attributes

spanEl.setAttribute("style", "font-size: 105%; color: #0000ff;");

spanEl.setAttribute("title", "DOM Level 1");
 


// Append the span object to the div object with id 'me'

mediv = document.getElementById("me");

mediv.appendChild(spanEL);

DOM 2 adds support for XML Namespaces and so can create namespaced elements and set namespaced attributes:

// Create the XHTML span element

spanElNS = document.createElementNS("http://www.w3.org/1999/xhtml", "span");
 


// Create the text node

spanT = document.createTextNode("Modelling the Document Objects");
 


// Appending the text node to the XHTML span object

spanElNS.appendChild(spanT);
 


// Set a couple of XHTML attributes

spanElNS.setAttributeNS("http://www.w3.org/1999/xhtml", "style", "font-size: 105%; color: #0000ff;");

spanElNS.setAttributeNS("http://www.w3.org/1999/xhtml", "title", "DOM Level 2");
 


// Append the XHTML span object to the XHTML div object with id 'me'

mediv = document.getElementById("me");

mediv.appendChild(spanELNS);

Or if prefixed with xhtml: then include the prefix when nameing the element or attribute. It is also an idea to put the namespace URI into a variable and then use that variable within the methods to streamline readability.

When using the DOM in JavaScript or JScript it is best to test if the objects are supported as not all web browsers or other environments that use scripting may have DOM support:

if ((document.getElementById) && (document.createElementNS)) {

  // Do DOM 2 stuff

} else if ((document.getElementById) && (document.createElement)) {

  // Do DOM 1 stuff

} else {

  // Do non DOM stuff

} // end if document.getElementById and document.createElementNS exist

For more information about Document Object Model (DOM) you can visit http://www.w3.org/DOM/DOMTR.

Browser DOM Extensions / DOM 5 HTML

Most web browsers have added extra objects, methods and properties to cover features that the existing DOM does not address or to be more efficient than the current way.

Some of these are now being made official in the upcoming HTML 5 specification as DOM 5 HTML.

One of the most popular is innerHTML.
This was originally invented by Microsoft and other browser vendors added support for it as compatibility for IE only websites but found it quite usefull in its own right and is an unofficial standard.
innerHTML is a property that you can retreive the contents of the element or assign new content (replacing the old).

// Capture the div element

var divel = document.getElementById(“me”);

// Assign content

divel.innerHTML = "<span style=\"font-size: 105px; color: #0000ff\" title=\"DOM Level 5 HTML\">Modelling the document objects</span>";

// Get content

var currentContents = divel.innerHTML;

// Forgot to add extra sentance so need to add to current contents

divel.innerHTML = currentContents + " <span class=\"fancyStyling\">Adding an extra sentance</span>";

Web Standards Articles TOC

Interesting Links for Web Standards Articles

Depreciated but archived:

Legend Scrolls

Modelling the Document Objects

DOM

Browser DOM Extensions / DOM 5 HTML

Web Standards Articles TOC