Wrox Home  
Search
Web Standards Programmer's Reference: HTML, CSS, JavaScript, Perl, Python, and PHP


Excerpt from Web Standards Programmer's Reference: HTML, CSS, JavaScript, Perl, Python, and PHP

Working with The Document Object Model - Part III

By Steven M. Schafer

Most Web programmers are familiar with Dynamic HTML (DHTML) and the underlying Document Object Models developed by Netscape and Microsoft for their respective browsers. However, there is a unifying Document Object Model (DOM) developed by the W3C that is less well known and, hence, used less often. The W3C DOM has several advantages over the DHTML DOM — using its node structure it is possible to easily navigate and change documents despite the user agent used to display them.

The previous articles in this series (Part I and Part II) introduced the W3C DOM and the JavaScript properties and methods that can be used to work with it. You learned how to manually traverse a document's nodes and how to find particular nodes. This final article in this series shows you how to manipulate a document's nodes using JavaScript.

The W3C DOM is much more complex than shown within this article. There are several additional methods and properties at your disposal to use in manipulating documents. Further reading and information on the standard can be found on the W3C Web site at http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/Overview.html. Chapter 22 "JavaScript Objects and Dynamic HTML" of the book Web Standards Programmer's Reference: HTML, CSS, JavaScript, Perl, Python, and PHP also covers the details of the DHTML DOM.

A Sample Document

The code in this article uses the same example document as the previous articles, duplicated here for your convenience. The following code shows the example document that renders as shown in Figure 1 and whose resulting DOM is shown in the illustration of Figure 2.

<html>
<head>
<title>Sample DOM Document</title>
<style type="text/css">  
div.div1 { background-color: #999999; }
  div.div2 { background-color: #BBBBBB; }
  table, table * { border: thin solid black; }
  table { border-collapse: collapse; }
  td { padding: 5px; }</style>
  <script type="text/JavaScript"></script></head>
<body>
<div class="div1">
  <h1>Heading 1</h1>
  <table>
    <tr><td>Cell 1</td><td>Cell 2</td></tr>
    <tr><td>Cell 3</td><td>Cell 4</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit, sed diam <b>nonummy nibh euismod</b> tincidunt ut laoreet
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim
  veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="div2">
  <h1>Heading 2</h1>
  <p>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 minim
  veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <ol id="sortme">An ordered list
    <li>Gamma</li>
    <li>Alpha</li>
    <li>Beta</li>
  </ol>
</div>
</body>
</html>

Figure 1

Figure 2

Changing Node Values

As previously mentioned, you can manipulate document nodes on the fly, adding, removing, and changing them as needed. The following sections show examples of changing nodes.

Example: Changing a Node's Value

This example shows how a text node's value can be changed.

Source This example uses previously discussed methods to find and change the text of an OL node.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DOM Find Node</title><
style type="text/css">  
div.div1 { background-color: #999999; }
  div.div2 { background-color: #BBBBBB; }  
  table, table * { border: thin solid black; }
  table { border-collapse: collapse; }
  td { padding: 5px; }</style>
  <script type="text/JavaScript">
  function findNode(startnode,nodename,nodeid) 
  {  var foundNode = false;  
  // Check our starting node for what we are looking for
  if ( startnode.nodeName == nodename &&
       startnode.id == nodeid ) {
    foundNode = startnode;
  } else {
    // If not found, look through children
    look_thru_children:
    if ( startnode.hasChildNodes() ) {
      var children = startnode.childNodes;
      for (var i = 0; i < children.length; i++) {
        foundNode = findNode(children[i],nodename,nodeid);
         // Return when found
         if (foundNode) { break look_thru_children; }
      }
    }
  }
  return foundNode;
}function dofindNchange() {
  alert("Click OK to change 'sortme' node's text");
  var node = document.getElementById("sortme");
  if (node.firstChild.nodeType == 3) {
    node.firstChild.nodeValue = "Changed text";
  }
}</script></head>
<body onload="dofindNchange()">
<div class="div1">
  <h1>Heading 1</h1>
  <table>
    <tr><td>Cell 1</td><td>Cell 2</td></tr>
    <tr><td>Cell 3</td><td>Cell 4</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit, sed diam <b>nonummy nibh euismod</b> tincidunt ut laoreet
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim
  veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="div2">
  <h1>Heading 2</h1>
  <p>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 minim
  veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <ol id="sortme">An ordered list
    <li>Gamma</li>
    <li>Alpha</li>
    <li>Beta</li>
  </ol>
</div>
</body>
</html>

The change of the node takes place in the findNchange() function, after finding the node. The found node's firstChild is checked to ensure it is text, and then its value is changed.

Output

Figure 3

Using the DOM, you can also rearrange nodes within the document, as demonstrated in the next section.