Using Javascript and Strict XHTML 1.1 Doctypes

Understanding the DOM

The Document Object Model ( or DOM for short ) arranges the HTML document in a tree heirachy with the HTML element being the topmost and all other elements being descendents. This model allows us to use javascript to access the different elements ( just think tags, like h1 or div ) and dynamically change the web page. This is commonly referred to as Dynamic HTML, or DHTML. To get a view of the DOM of a particular web page, if you are using Mozilla, just click on the Tools menu and then DOM Inspector. This opens a new window where you can easily view the whole DOM, it's a great learning tool to see how other sites are made, but also good for debugging your own web sites.

An even better tool for exploring the DOM is the Mozilla extention called Firebug, this is a very powerful tool for debugging every aspect of a web page.

The easiest way to think of this is to use a real example, imagine an XHTML document with the structure shown below.

<div id="first">
     <h1>This is the main heading</h1>
     <p id="main">This is some text
         <a href="#" id="link">A link</a>
     </p>
</div>

In this document snippet if we use the code 

div=document.getElementById("first")

it will return a reference to the <div>. Since the first element below the <div> is the <h1>, if we now write

div.ChildNodes[0]

this will return a reference to the <h1> element. And by the same logic using

div.ChildNodes[1]

will return a reference to the <p> element. The children of the <div> are an array of elements and can be accessed in this way. The reverse is also true whereby the <div> is the parent node of the <h1> and the <p> elements.

Essentially this is the key to writing Javascript on a standards compliant webpage. Once we have a reference to the desired node (by giving it an id, not a name) we can append, modify or remove child elements as desired. Of course it may seem faster initially to use innerHTML and just write all the code at once into an element but one of the maor drawbacks is that this returns no reference to the written objects whereas using the method shown here is in the long run much more flexible when you are used to it. Also if you wish to write a site with a Strict XHTML 1.1 Doctype you will have no choice but to use this method as the innerHTML() method will not work.

When using a strict XHTML 1.1 doctype you cannot use document.getElementById("element").innerText or document.getElementById("element").innerHTML to access the element. Instead you must use the standard W3C method of creating, replacing or removing child nodes, as is shown below.

Create a text node

This is very easy to do, simply create a text node using document.createTextnode("your text"), then get a reference to the element you wish to add the text node to and use the appendChild() method on this element to add the text node.

Click to create a new text node
Click to remove it 

var div=document.getElementById("divCreate")
var textnode=document.createTextNode("This is the new node")
div.appendChild(textnode)

Modifying a text node

We can also access the methods of the text node to easily change the style for example. Just get a reference to the node as above and use the style method to alter the contents as desired.

Make bold and red

This is the text to change
var div=document.getElementById("divChange");
div.style.fontFamily="lucida console"
div.style.fontStyle="italic"
div.style.fontSize="25px"
div.style.color="#f00"
div.style.padding="0.5em"

Replace a text node

Once we have created a text node we can now modify the text at any time by replacing the text node using the replaceChild() method as shown below. Just enter some text into the input box and click modify to change the message below.

 

You can change this text
var div=document.getElementById("divReplace")
var newText=document.getElementById("newtext").value
var newNode=document.createTextNode(newText)
div.replaceChild(newNode,div.childNodes[0])

Using a similar method we can dynamically create hyperlinks very easily. In this case we use the createElement() method to create a new <a> element. Then using the setAttribute() method we add the title, class, and href. To display the text for the link we simply use createTextNode() as above and append this to the <a> element we just created, making the text node a child element of the link.

Note that I have used link.className="dark" and not link.setAttribute("dark",class) because although this worked perfectly in Firefox, the class was not applied to the link in IE. 




var div=document.getElementById("divHyper")
var title=document.getElementById("linktitle").value
var text=document.getElementById("linktext").value
var textNode=document.createTextNode(text)
var link=document.createElement("a")
link.setAttribute("title",title)
link.setAttribute("href",href)
link.className="dark"
link.appendChild(textNode)
div.appendChild(link)

Creating tables dynamically

We can also create dynamic tables by creating a table element and appending the row a cell elements. Note that the order or appending element is very important. First we create the <table> element then the <tbody> followed by the <tr> and the <td> and finally the text node to hold the cell text. After creating these element we must append them to their parent elements in the opposite order, so first we append the text node to the <td> and then append the <td> element to the <tr> and so on until we finally append the <table> element to the holding <div>. Another important point to note is that you must create a <tbody> child of the table for this to work, you could easliy add a title row by appending a <thead> element as a first child to the <table>. 



var div=document.getElementById("divTable");
var rows=document.getElementById("rows").value
var columns=document.getElementById("columns").value
var tbl=document.createElement("table");
tbl.setAttribute("id","dynamic")
tbl.style.borderWidth="1px"
tbl.style.borderStyle="solid"
tbl.style.borderColor="#ccc"
var tb=document.createElement("tbody");
for (var i=0;i<rows;i++)
    {
    tr=document.createElement("tr");

    for (var j=0;j<columns;j++)
        {
        var td=document.createElement("td");
        var contents="cell"
        var contentsNode=document.createTextNode(contents)
        td.appendChild(contentsNode)
        td.style.borderWidth="1px"
        td.style.borderStyle="solid"
        td.style.borderColor="#ccc"
        td.style.backgroundColor="#fff"
        td.style.padding="3px"
        tr.appendChild(td)
        }
    tb.appendChild(tr)
    }
tbl.appendChild(tb)
div.appendChild(tbl)