Chapter 13

In this chapter we looked at the DOM and how the standard method for accessing objects on the HTML document can be applied in JavaScript and used to create web pages that will work in both major browsers.

Question 1

Here's some HTML code that creates a web page. Re-create this page, using JavaScript to generate the HTML with document.write(), and using only DOM objects, properties, and methods. Test your code on IE 6 and NN 7 to make sure it works on both if possible.

Note
Hint: Comment each line as you write it to keep track of where you are in the tree structure and also create a new variable for every element on the page (for example, not just one for each of the TD cells, but 9 variables).

<html>
<head>
</head>
<body>
<table>
   <thead>
      <TR>
         <TD>Car</TD>
         <TD>Top Speed</TD>
         <TD>Price</TD>
      </TR>
   </thead>
   <tbody>
      <TR>
         <TD>Chevrolet</TD>
         <TD>120mph</TD>
         <TD>$10,000</TD>
      </TR>
      <TR>
         <TD>Pontiac</TD>
         <TD>140mph</TD>
         <TD>$20,000</TD>
         </TR>
         </tbody>
</table>
</body>
</html>

It seems a rather daunting example, but rather than being difficult, it is just a conjunction of two areas, one building a tree structure and the other navigating the tree structure. You start by navigating to the <body> element and creating a <table> element. Now you can navigate to the new <table> element you've created and create a new <thead> element and carry on from there. It's a lengthy and repetitious process, so that's why it's a good idea to comment your code to keep track of where you are.

<html>
<head>
</head>
<body>
<script language="JavaScript">
var TableElem = document.createElement("table")
var THElem = document.createElement("thead")
var TRElem1 = document.createElement("TR")
var TRElem2 = document.createElement("TR")
var TRElem3 = document.createElement("TR")
var TDElem1 = document.createElement("TD")
var TDElem2 = document.createElement("TD")
var TDElem3 = document.createElement("TD")
var TDElem4 = document.createElement("TD")
var TDElem5 = document.createElement("TD")
var TDElem6 = document.createElement("TD")
var TDElem7 = document.createElement("TD")
var TDElem8 = document.createElement("TD")
var TDElem9 = document.createElement("TD")
var TBODYElem = document.createElement("TBODY")
var TextNodeA1 = document.createTextNode("Car")
var TextNodeA2 = document.createTextNode("Top Speed")
var TextNodeA3 = document.createTextNode("Price")
var TextNodeB1 = document.createTextNode("Chevrolet")
var TextNodeB2 = document.createTextNode("120mph")
var TextNodeB3 = document.createTextNode("$10,000")
var TextNodeC1 = document.createTextNode("Pontiac")
var TextNodeC2 = document.createTextNode("140mph")
var TextNodeC3 = document.createTextNode("$14,000")
    
docNavigate = document.documentElement;  //Starts with HTML document
docNavigate = docNavigate.lastChild;     //Moves to body element
docNavigate.appendChild(TableElem);      //Adds the table element
docNavigate = docNavigate.lastChild;     //Moves to the table element
docNavigate.appendChild(THElem);         //Adds the thead element
docNavigate = docNavigate.firstChild;    //Moves to the thead element
docNavigate.appendChild(TRElem1);        //Adds the TR element
docNavigate = docNavigate.firstChild;    //Moves the TR element
docNavigate.appendChild(TDElem1);        //Adds the first TD element in the
                                         // heading
docNavigate.appendChild(TDElem2);        //Adds the second TD element in the
                                         // heading
docNavigate.appendChild(TDElem3);        //Adds the third TD element in the
                                         // heading
docNavigate = docNavigate.firstChild;    //Moves to the first TD element
docNavigate.appendChild(TextNodeA1);     //Adds the second text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeA2);     //Adds the second text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeA3);     //Adds the third text node
    
docNavigate = docNavigate.parentNode;    //Moves back to the TR element
docNavigate = docNavigate.parentNode;    //Moves back to the thead element
docNavigate = docNavigate.parentNode;    //Moves back to the table element
docNavigate.appendChild(TBODYElem);      //Adds the tbody element
docNavigate = docNavigate.lastChild;     //Moves to the tbody element
docNavigate.appendChild(TRElem2);        //Adds the second TR element
docNavigate = docNavigate.lastChild;     //Moves to the second TR element
docNavigate.appendChild(TDElem4);        //Adds the TD element
docNavigate.appendChild(TDElem5);        //Adds the TD element
docNavigate.appendChild(TDElem6);        //Adds the TD element
docNavigate = docNavigate.firstChild;    //Moves to the first TD element
docNavigate.appendChild(TextNodeB1);     //Adds the first text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeB2);     //Adds the second text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeB3);     //Adds the third text node
docNavigate = docNavigate.parentNode;    //Moves back to the TR element
docNavigate = docNavigate.parentNode;    //Moves back to the tbody element
docNavigate.appendChild(TRElem3);        //Adds the TR element
docNavigate = docNavigate.lastChild;     //Moves to the TR element
docNavigate.appendChild(TDElem7);        //Adds the TD element
docNavigate.appendChild(TDElem8);        //Adds the TD element
docNavigate.appendChild(TDElem9);        //Adds the TD element
docNavigate = docNavigate.firstChild;    //Moves to the TD element
docNavigate.appendChild(TextNodeC1);     //Adds the first text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeC2);     //Adds the second text node
docNavigate = docNavigate.nextSibling;   //Moves to the next TD element
docNavigate.appendChild(TextNodeC3);     //Adds the third text node
</script>
</body>
</html>

Question 2

Augment your DOM web page so that the table has a border and so that the headings only of the table (that is, not the column headings) are center aligned. Again test your code on both IE 6 and NN 7 if possible.

Note
Hint: Add any extra code to the end of the script code you have already written.

Add these lines to the bottom of the script code to add a border.

docAttr = document.getElementsByTagName("table").item(0)
docAttr.setAttribute("border","1")

Add these lines to the bottom of the script code to center-align headings.

docNewAttr = document.getElementsByTagName("thead").item(0)
docNewAttr.setAttribute("align","center")