The document object model (DOM) is simply an agreed upon model for describing/accessing each and every node in an HTML or XML document. Because of the DOM it is possible to access, create, read, change, and delete the nodes that define a typical html or xml document. In other words using the DOM gives complete control over the entire document in order too easily rewrite your page on the fly without the browser making a trip back to the server for new information.

Warning: Examples are not using unobtrusive javascript techniques which the author recommends but was too lazy to implement. I also felt that it might cloud the code. If you want to know about unobtrusive techniques you know where to go (and if you don't, click this link). Also, for proper functionality use the JS code in order as the document reads. If things seem screwy just re-fresh the browser.

Accessing Element Nodes

Several ways exists to access the element nodes in a XML or HTML document, the following two methods will likely be used the most.

getElementById() and getElementsByTagName()

Below is a paragraph of Lorem ipsum wrapped with a p tag that has an "id" attribute set to "paragraphone".

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad min

Clicking the following link getidvalue('paragraphone') will execute the javascript function below which locates the p tag element (housing the Lorem ipsum text) on this page by its id and then returns the node value (by way of a browser alert) of the first child node inside the p tag. The first child node is a text node. Upon further investigation of the JS function below you will see I have called two alerts. The alert showed up twice for this reason and did so to demonstrate the two properties (nodeValue and data) used in javascript to identify the actual text inside the text node.

function getidvalue(id)
{
    alert(document.getElementById(id).firstChild.nodeValue)
    alert(document.getElementById(id).firstChild.data)
}

Now, its most likely that you will be wanting to store the access to an element with a specific "id" in a variable. For example by clicking the following link gettag() you execute the following javascript function:

function gettag()
{
var accesspone = document.getElementById('paragraphone');
alert(accesspone.tagName);
}

Here I have stored the access to the p tag which encapsulates the Lorem ipsum text in a variable called accesspone. Clicking the gettag() link above will return a browser alert that tells you which tag has the "id" attribute set to the value of "paragraphone".

Creating/Removing nodes & adding attributes and values to Element Nodes

Now that we can access a element node, let's create a new node dynamically. Below this paragraph in the source code for this document is any empty p tag with an id attribute with a value of "appendinside". By clicking the following link addingelement() you can add a child element (in this case a span tag with a id value of newspan) to the p tag. Now that a span tag & text have been added (indicated with by the Lorem ipsum that appeared below this paragraph) to this document as a child of the p tag, clicking this link addtexttoelement(' !') will append an exclamation to the end of the text node located inside the span element node. A question mark should have been added to the end of the lorem ipsum text.

Just in case you didn't catch how I added an attribute and value to the span tag that was dynamically added to this page I have another example. The above line of text that we added can be centered by clicking the following link centertext() that will add a align attribute with a value of center to the p tag that encapsulates the span element node and text node.

It should be noted that instead of adding a text node to an element we can also add html to the inside of an element node. For example clicking the following link addhtmltexttoelement() will change the html inside of the span tag we just dynamically added. Using the innerHTML property of element node is often a more simplified route then creating a element node and then a text node.

To remove the span tag click the following link removeelement() that locates the parent node of the span tag and then based off that node removes its child node.

Below are the five functions used in the above section. I would recommend looking at the source code to more accurately dissect the Javascript

function addingelement()
{
var newelement = document.createElement('span');
document.getElementById('appendinside').appendChild(newelement);
newelement.setAttribute('id','newspan');
alert('You have added a '
+ newelement.nodeName
+ ' tag to the emtpy p tag. It has an id attribute with a value of '
+ document.getElementById('newspan').attributes['id'].value);
newelement.appendChild(document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad min'));
}

function addtexttoelement(thetext)
{
document.getElementById('newspan').appendChild(document.createTextNode(thetext))
}

function addhtmltexttoelement()
{
document.getElementById('newspan').innerHTML ='This is updated text that replaced the Lorem ipsum by using the innerHTML property of an element node to change the text node inside the span element'
}

function centertext()
{
document.getElementById('appendinside').setAttribute('align','center');
}

function removeelement()
{
document.getElementById('appendinside').removeChild(document.getElementById('newspan'));
}