topical media & game development

talk show tell print

basic-javascript-14-MyDogsJS-mydogs-js.htm / htm

      <title>My Dogs Final</title>
      <script type="text/javascript">
      function createDocument() 
          //Temporary DOM object.
          var xmlDoc;
          //Create the DOM object for IE
          if (window.ActiveXObject) 
              var versions = 
              for (var i = 0; i < versions.length; i++) 
                      xmlDoc = new ActiveXObject(versions[i]);
                      return xmlDoc;
                  catch (error) 
                      //do nothing here
          //Create the DOM for Firefox and Opera
          else if (document.implementation && document.implementation.createDocument) 
              xmlDoc = document.implementation.createDocument("","",null);
              return xmlDoc;
          return null;
      var xmlDocument = createDocument();
      function displayDogs() 
          //Get the <dog/> elements.
          var dogNodes = xmlDocument.getElementsByTagName("dog");
          //Create a <table/> element.
          var table = document.createElement("table");
          table.setAttribute("cellPadding",5); //Give the table some cell padding.
          table.setAttribute("width", "100%");
          table.setAttribute("border", "1");
* Begin <thead/> Element. **

          var tableHeader = document.createElement("thead");
          //Create a <tr/> element.
          var tableRow = document.createElement("tr");
          //Loop through the child nodes of a <dog/> element.
          for (var i = 0; i < dogNodes[0].childNodes.length; i++) 
              var currentNode = dogNodes[0].childNodes[i];
              //Check to see if the child node is an element.
              if (currentNode.nodeType == 1) 
                  //Create a <th/> element.
                  var tableHeaderCell = document.createElement("th");
                  //Create a text node with currentNode's nodeName.
                  var textData = document.createTextNode(currentNode.nodeName);
                  //Append the text node to the heading.
                  //Append heading to the row.
          //Append the row with the colum headers to the <thead/>
          //Append the <thead/> to the table.
* End <thead/> Element. **

* Begin <tbody/> Element. **

          var tableBody = document.createElement("tbody");
          //Loop through the <dog/> elements.
          for (var i = 0; i < dogNodes.length; i++) 
              //Create a new <tr/> element.
              var tableRow = document.createElement("tr");
              //Now loop through this <dog/>'s child nodes.
              for (var j = 0; j < dogNodes[i].childNodes.length; j++) 
                  //Store the current node for easier access.
                  var currentNode = dogNodes[i].childNodes[j];
                  //Check the node to see if it's an element.
                  if (currentNode.nodeType == 1) 
                      //Create a data cell.
                      var tableDataCell = document.createElement("td");
                      //Create a text node with currentNode's nodeName.
                      var textData = document.createTextNode(currentNode.firstChild.nodeValue);
                      //append the text node to the data cell.
                      //Append the data cell to the row.
              //Append the row to the <tbody/>.
          //Append the tbody to the table.
* End <tbody/> Element. **

      <a href="javascript: displayDogs();">Display Dogs</a>

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.