JavaScript Tutorial 9
Object Hierarchy


This short lesson is about the object hierarchy. When a web page loads it creates a heirarchy of objects. In this heirarchy, objects that are decendents of other objects are properties of these objects. Understanding this heirarchy will help us understand how to use javascript to access the properties of different objects in the page.

Here is a chart of the object hierarchy, look it over and see if you understand the relationships:



Now suppose we want to use JavaScript to access a value in a Text Input. The Object Hierarchy tells us how to reference the value. For instance, suppose we have a form with a text input on a web page like this:


<body>

<form name=testform>
<input type=text name=texttest value=testvalue>
</form>




Then if we wanted to access the value of the text box we could do the following:

window.document.testform.texttest.value


Which follows our object hierarchy Window ->Document -> Form ->Text as you can see from the chart:



This may seem like too simple of an idea to even warrant an entire lesson on it, but you will see the value of understanding the object hierarchy when we begin managing windows and frames in lesson 12 and in later lessons on DHTML.


We are done for now, see you at the nest lesson.