Exercise Questions

Suggested solutions to these questions can be found in Appendix A.

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")