The Document Object Model

Aims:

to learn about the Document Object Model and how it relates to client-side JavaScripts
to consider how to write webapps that perform client-side user data validation

The Document Object Model (DOM)

A Document Object Model (DOM) describes the objects that make up a document so they can be manipulated by a scripting language
There are two DOMs in use for (X)HTML documents
- The Legacy DOM
  - a simple DOM that describes a document as collections of objects
  - provides access only to certain document elements such as links, images and forms
  - does not allow changes to a document that would require a reflow
  - is widely supported by browsers
- The W3C DOM (levels 0, 1, 2 and 3)
  - includes the Legacy DOM as Level 0
  - but also describes a document as a hierarchy of objects
  - gives more comprehensive access to parts of a document
  - is a standard and is fairly well supported by new browsers

The Legacy DOM (simplified)

[A diagram showing a simplified version of the Document Object Model]

Legacy DOM objects

The window object represents the browser window
The document object represents the document being displayed
The location object represents the URL of the document being displayed
The history object represents the window's recently visited URLs

Legacy DOM collections

Collections are arrays of related objects on a page
For a document:
- links[] - all hyperlinks in the document
- images[] - all img elements
- anchors[] - all a elements with a name or id attribute
- forms[] - all form elements
For a form:
- elements[] - controls on a form where the tag is input, textarea, select or button

Legacy DOM example

Consider this web page: legacy.html
Class exercise: What do the following refer to?
document.forms[0].elements[0] document.forms[0].elements[1]

The W3C DOM (simplified)

(X)HTML documents have a hierarchical structure
The W3C DOM represents the document as a tree
To traverse a tree, use properties such as the following:
- firstChild
- lastChild
- childNodes (returns an array)
- previousSibling
- nextSibling
- parentNode
Or you can find elements, e.g., by id: getElementById(...)
And there are various ways to modify the document too

W3C DOM example

(In some bnrowsers, such as Firefox, whitespace counts as a child!)
Consider this web page: w3c.html
Class exercise: These refer to the two buttons. Explain how
document.forms[0].childNodes[1].childNodes[1] document.getElementById("btns").childNodes[3].childNodes[1]

W3C DOM example: changing the document

Examples from previous lecture:

function make_it_smile()
{
	document.getElementById("face").src = 'smile.jpg';
}

function make_it_frown()
{
	document.getElementById("face").src = 'frown.jpg';
}

Version 1: `animal1.php`, a self-processing page

Note that this PHP script does no validation of user data

<?php 
 $year = '';
 $output = '';
 $animals = array('Monkey', 'Rooster', 'Dog', 'Pig', 
                  'Rat', 'Ox', 'Tiger', 'Rabbit', 
                  'Dragon', 'Snake', 'Horse', 'Goat');
 if ( isset($_GET['submitted']) ) 
 {
    $year = $_GET['year'];
    $index = $year % 12;
    $output = "You are a {$animals[$index]} (roughly speaking)";
 }
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>When were you born?</title>
  <script type="text/javascript" src="year_validate.js">
  </script>
</head>

<body>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="get">
 
  <p>
   <label for="yearField">In what year were you born?</label>
   <input type="text" name="year" id="yearField" 
          value="<?php echo $year; ?>"
          size="4" maxlength="4" />
  </p>

  <p>
   <input type="submit" name="submitted" value="Submit" />
  </p>
  
  <p id="output">
   <?php echo $output ?>
  </p>

</form>

</body>
</html>

Version 1: `year_validate.js`, client-side JavaScript

This JavaScript validates the user's data before submitting it to animal1.php.
Note the use of the W3C DOM

if ( window.addEventListener )
{
   window.addEventListener("load", init, false);
}
else if ( window.attachEvent )
{
   window.attachEvent("onload", init);
}

function init()
{
   document.forms[0].onsubmit = validate;
}

function validate()
{
   var year;
   year = document.getElementById("yearField").value;
   if ( ! /^\d{4}/.test(year) ||  year > (new Date()).getFullYear() )
   {
      document.getElementById("output").firstChild.nodeValue = 'ERROR: You must enter a valid year';
      return false;
   }
}

Version 2: `animal2.php`, belt and braces!

animal2.php uses year_validate.js to perform validation of user data but also validates the user's data all over again on the server.
Why might this be better?

<?php 
 $year = '';
 $output = '';
 $animals = array('Monkey', 'Rooster', 'Dog', 'Pig', 
                  'Rat', 'Ox', 'Tiger', 'Rabbit', 
                  'Dragon', 'Snake', 'Horse', 'Goat');
 if ( isset($_GET['submitted']) ) 
 {
    $year = $_GET['year'];
    if ( trim($year) == '' || ! is_numeric($year) || $year < 0 || $year > date('Y') )
    {
       $output = "ERROR: You must enter a valid year.";
    }
    else
    {
       $index = $year % 12;
       $output = "You are a {$animals[$index]} (roughly speaking)";
    }
 }
?>
...

Version 3

We can do everything on the client-side!
animal3.js validates the user's data and decides on the output
The server isn't involved at all
Class exercises:
- When can we take this approach?
- It's fast but what's its disadvantage?