Figure 3-1 shows what this HTML code looks like as a DOM document tree in Java

Creator ECC200 in Java Figure 3-1 shows what this HTML code looks like as a DOM document tree

As you work with DOM objects in your scripts, one of the most important tasks is being able to access the particular object or collection of objects that you want to manipulate The DOM provides several ways to reference a particular DOM object

To access a particular object, you need to refer to it in your code relative to the document s object hierarchy by using dot notation Consider the following HTML snippet:

To reference the text input element inside the form and assign it to a variable, you use this line:

var fn = documentshippingFormfirstName;

When you use dot notation, be aware of the document s hierarchy The following line of code, for example, doesn t successfully return the text input element because we left out the containing form reference:

A significant shortcoming to using dot notation is that because the object name is hard coded, it cannot change when you run your script The techniques shown in the next four sections provide greater flexibility

You can also access an object by using square brackets instead:

documentshippingForm[ firstName ]

The object identifier (the input element s id value) is placed inside brackets and surrounded by quotes

You can reference several built-in collections of objects Perhaps the most notable is documentforms, which returns a collection of form elements from the document You can access it by index (the order in which it occurs in the source) For example, to access the first form in a page, you use this line:

documentforms[0]

However, this technique is problematic because moving forms around on a page ruins your script A much better practice is to reference the form s id (or name) attribute instead:

var cf = documentforms[ customer_form ];

Similarly, to access a form element, you can use the elements collection:

var ln = documentform[ customer_form ]elements[ last_name ]value;

The document object s getElementById() method retrieves the element that has a specific id attribute value It eliminates the need to worry about hierarchy and get straight to it:

documentgetElementById( elementID )

Suppose that you have the following line of HTML:

You can access the div by using the following line of code:

var main = documentgetElementById( main_text );

The main variable now references the main_text div You can now use main to access its properties and perform methods on it

The getElementById() is ideal to use if the element you re trying to retrieve has an id value that s defined in the HTML code However, when an id doesn t exist or you need to access multiple elements of the same kind, you can use documentgetElementByTagName() The document object s getElementByTagName() method allows you to return all elements with a particular tag name as a collection (officially, a nodeList) For example, to retrieve all div elements in your document, you can use this command:

var divList = documentgetElementByTagName( div );

After you have the collection of elements, you can access a particular div in the list by using its index number For example, to access the first div in the document, write this line:

var div1 = divList[0];

Alternatively, if you don t need to work with the collection, you can simply combine the two lines of code into one:

var div1 = documentgetElementByTagName( elementId )[0];

If you want to retrieve a collection of all elements in a document, you can use an asterisk in place of a tag name:

var allElements = documentgetElementsByTagName( * );

The allElements variable references all elements in the order in which they occur in the HTML source However, note that this technique isn t supported by Internet Explorer 55 and earlier