Modelling the Document Objects

Release: 2009-12-18
Jump to Web Standards Articles TOC

Page 1,

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.

 There are a few main levels of the DOM, each are made up of modules. We are just going to look at the basics of DOM 1 HTML, DOM 2 HTML and DOM 5 HTML.

 As the most typical scripting environment that uses DOM is ECMAScript / JavaScript, the open standard that Netscape/Mozilla JavaScript (used by most web browsers) and Microsoft's JScript (used in Internet Explorer) are based on; 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 <p class="highBlue" title="DOM Level 1">Modelling the Document Objects</p> element with it:

// Create the paragraph element
var pEL = document.createElement("p");

// Create the text node
var pText = document.createTextNode("Modelling the Document Objects");

// Appending the text node to the paragraph object
pEL.appendChild(pText);

// Set a couple of attributes
pEL.setAttribute("class", "highBlue");
pEL.setAttribute("title", "DOM Level 1");

// Append the paragraph object to the div object with id 'me'
mediv = document.getElementById("me");
mediv.appendChild(pEL);
Figure 1: Basic DOM 1 example

DOM 2 adds support for XML Namespaces and so can create namespaced elements and set namespaced attributes (mostly for native XHTML and XML in general):

// Save the XHTML namespace for improved readability
var xhtmlns = "http://www.w3.org/1999/xhtml";

// Create the XHTML paragraph element
var pELNS = document.createElementNS(xhtmlns, "p");

// Create the text node
var pText = document.createTextNode("Modelling the Document Objects");

// Appending the text node to the XHTML paragraph object
pELNS.appendChild(pText);

// Set a couple of XHTML attributes
pELNS.setAttributeNS(xhtmlns, "class", "highBlue");
pELNS.setAttributeNS(xhtmlns, "title", "DOM Level 2");

// Append the XHTML paragraph object to the XHTML div object with id 'me'
mediv = document.getElementById("me");
mediv.appendChild(pELNS);
Figure 2: Basic DOM 2 example

Or if prefixed with xhtml: then include the prefix when naming the element or attribute such as .createElementNS(xhtmlns, "xhtml:p") and .setAttributeNS(xhtmlns, "xhtml:class", "highBlue"). But usually just the elements would be prefixed unless the attributes are from a different XML language to the current element.

When using the DOM in ECMAScript / JavaScript 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
Figure 3: Using the latest DOM code

More DOM

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 useful in its own right and is an unofficial standard.

innerHTML is a property that you can retrieve 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 = "<p class=\"highBlue\" title=\"DOM Level 5 HTML\">Modelling the document objects</p>";

// Get content
var currentContents = divEL.innerHTML;

// Forgot to add extra sentence so need to add to current contents
divEL.innerHTML = currentContents + " <p class=\"fancyStyling\">Adding an extra sentance</p>";
Figure 4: Using innerHTML

Plus more web browsers have support for the outerHTML property which will replace not only the contents but the current element object itself such as:

// Obtain 3rd paragraph (<p id="info">Accessible versions of a video.</p>)
var collection = document.getElementsByTagName('p');
var theInfo = collection.item(2);

// Replace with an unordered list
theInfo.outerHTML = '<ul id="info"><li>Captions,</li><li>Audio Description</li><li>Extended Audio Description</li><li>Sign Language Video</li></ul>';
Figure 5: Replaceing with outerHTML

Continue to Page 2

Page 1,

Copyright ©2005-2010 Legend Scrolls and Peter Davison.
Icons from the Oxygen Icon Theme, LGPL, and PNG version of icons in the Oxygen Icon Theme from kde-look.org, GPL.
All rights reserved.