Putting It All Together

Now that we have seen all the components of the traditional object model, it is time to show how all the components are used together. As we have seen previously, by using a tag’s name or determining its position, it is fairly easy to reference an occurrence of an HTML element that is exposed in the JavaScript object model. For example, given

<<form name="myForm" id="myForm">>
<<input type="text" name="userName" id="userName">>
<</form>>

we would use

document.myForm.userName

to access the field named userName in this form. But how do you manipulate that tag’s properties? The key to understanding JavaScript’s object model is that generally (X)HTML elements’ attributes are exposed as JavaScript object properties. So given that a text field in XHTML has the basic syntax of

<<input type="text" name="unique identifier" id="unique identifier"
            size="number of characters" maxlength="number of characters"
            value="default value" />>

then given our last example, document.myForm.userName.type references the input field’s type attribute value, in this case, text, while document.myForm.userName.size references its displayed screen size in characters, document.myForm.userName.value represents the value typed in, and so on. The following simple example puts everything together and shows how the contents of a form field are accessed and displayed dynamically in an alert window by referencing the fields by name.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Meet and Greet<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function sayHello()
{
 var theirname=document.myForm.userName.value;
 if (theirname !="")
  alert("Hello "+theirname+"!");
 else
  alert("Don't be shy.");
}
//-->>
<</script>>
<</head>>
<<body>>
<<form name="myForm" id="myForm" action="#" method="get">>
<<strong>>What's your name?<</strong>>
<<input type="text" name="userName" id="userName"  size="20" />>
<<br />><<br />>
<<input type="button" value="Greet" onclick="sayHello();" />>
<</form>>
<</body>>
<</html>>

Not only can we read the contents of page elements, particularly form fields, but we can update their contents using JavaScript. Using form fields that are the most obvious candidates for this, we modify the previous example to write our response to the user in another form field.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Meet and Greet 2<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function sayHello()
{
 var theirname = document.myForm.userName.value;
 if (theirname != "")
  document.myForm.theResponse.value="Hello "+theirname+"!";
 else
  document.myForm.theResponse.value="Don't be shy.";
}
//-->>
<</script>>
<</head>>
<<body>>
<<form name="myForm" id="myForm" action="#" method="get">>
<<b>>What's your name?<</b>>
<<input type="text" name="userName" id="userName"  size="20" />> 
<<br />><<br />>
<<b>>Greeting:<</b>>
<<input type="text" name="theResponse" id="theResponse" size="40" />>
<<br />><<br />>
<<input type="button" value="Greet" onclick="sayHello();" />>
<</form>>
<</body>>
<</html>>

The previous examples show how to access elements using the most traditional object model following the containment hierarchy of window.document.collectionname where collectioname is an array of JavaScript objects such as forms[], anchors[], links[], and so on, that correspond to (X)HTML markup elements. However, under modern browsers that support the W3C DOM, we don’t necessarily have to follow this hierarchical style of access. For example, given a tag like

<<p id="para1">>Test paragraph<</p>>

we can use document.getElementById("para1") to access the <<p>> tag with id value of para1 directly rather than accessing it through some non-existent document.paragraphs[] collection. Once we have accessed the tag, we might set its attribute values as we did with the <<input>> tag previously. For example,

var theTag;
theTag = document.getElementById("para1");
theTag.align="right";

would set the align attribute of the paragraph to a value of "right". We could, of course, set any attribute the paragraph tag supports and even change its CSS properties via its style attribute.

While direct access seems far superior to the hierarchical method, it hasn’t always been available. So before concluding this chapter and jumping into the DOM in Chapter 10, we briefly present the various Browser Object Models and how they have evolved over the years. However, do not skip these sections or dismiss them as historical notes; these object models and approach to JavaScript are still the coding style used by many JavaScript developers, particularly those looking for backward compatibility. Furthermore, the object models presented (particularly Netscape 3) serve as the foundation of the DOM Level 0 specification, so they will live on far into the future.