262Part IIIDocument Objects ReferenceListing 15-19a(continued) function makeNormal() { if (event.srcElement == element) { runtimeStyle.color = oldColor; } } The object to which the component is attached is a simple paragraph object, shown in Listing15-19b. When the page loads, the behavior is not attached so clicking the paragraph text hasno effect. When you turn on the behavior by invoking the turnOn()function, the addBehavior() method attaches the code of the makeHot.htccomponent to the myPobject. At this point, the myPobject has one more property, one more method, and two more event handlers thatare written to be made public by the component s code. If you want the behavior to apply tomore than one paragraph in the document, you have to invoke the addBehavior()methodfor each paragraph object. After the behavior file is instructed to start loading, the setInitialColor()function iscalled to set the new color property of the paragraph to the user s choice from the selectlist. But this can happen only if the component is fully loaded. Therefore, the function checksthe readyStateproperty of myPfor completeness before invoking the component s function. If IE is still loading the component, the function is invoked again in 500 milliseconds. As long as the behavior is loaded, you can change the color used to turn the paragraph hot. The function first ensures that the component is loaded by checking that the object has thenew color property. If it does, then (as a demonstration of how to expose and invoke a com- ponent method) the method of the component is invoked. You can also simply set the prop- erty value. Listing 15-19b: Using addBehavior() and removeBehavior()

Related Items:idproperty; getElementById()method. elementObject.uniqueID

259Chapter 15Generic HTML Element Objectscount++; setToolTip(elem); }

title Property Lab

Roll the mouse over this paragraph a few times.
Then pause atop it to view the tooltip.

Related Item:window.statusproperty. uniqueIDValue:String.Read-Only Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- You can let the WinIE5+ browser generate an identifier (idproperty) for a dynamically gener- ated element on the page with the aid of the uniqueIDproperty. You should use this featurewith care because the ID it generates at any given time may differ from the ID generated thenext time the element is created in the page. Therefore, you should use the uniqueIDprop- erty when your scripts require an unknown element to have an idproperty but the algo- rithms are not expecting any specific identifier. To guarantee that an element gets only one ID assigned to it while the object exists in mem- ory, assign the value via the uniqueIDproperty of that same object not some other object. Once you retrieve the uniqueIDproperty of an object, the property s value stays the same nomatter how often you access the property again. In general, you assign the value returned bythe uniqueIDproperty to the object s idproperty for other kinds of processing. (For exam- ple, the parameter of a getElementById()method requires the value assigned to the idproperty of an object.) ExampleListing 15-18 demonstrates the recommended syntax for obtaining and applying a browser- generated identifier for an object. After you enter some text into the text box and click the but- ton, the addRow()function appends a row to the table. The left column displays the identifiergenerated via the table row object s uniqueIDproperty. IE5+ generates identifiers in the format ms__idn , where nis an integer starting with zero for the current browser session. Because theaddRow()function assigns uniqueIDvalues to the row and the cells in each row, the integer foreach row is three greater than the previous one. There is no guarantee that future generations ofthe browser will follow this format, so do not rely on the format or sequence in your scripts. Listing 15-18: Using the uniqueID Property

tabIndex Property Lab

The final function, resetTab(), sets the tabIndexproperty value to zero for all labform ele- ments; this restores the default order. Related Items:blur(), focus()methods. tagNameValue:String.Read-Only Compatibility:WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ The tagNameproperty returns a string of the HTML or XML tag name belonging to the object. All tagNamevalues are returned in all uppercase characters, even if the source code is writtenin all lowercase or a mixture. This consistency makes it easier to perform string comparisons. For example, you can create a generic function that contains a switchstatement to executeactions for some tags and not others. The skeleton of such a function looks like the following: function processObj(objRef) { switch (objRef.tagName) { case TR : [statements to deal with table row object] break; case TD : [statements to deal with table cell object] break; case COLGROUP : [statements to deal with column group object] break; default: [statements to deal with all other object types] } } elementObject.tagName

256Part IIIDocument Objects ReferenceIn Internet Explorer, you can remove an element from tabbing order entirely by setting itstabIndexproperty to -1. Users can still click those elements to make changes to form ele- ment settings, but tabbing bypasses the element. ExampleListing 15-16 contains a sample script that demonstrates how to control the tab order of aform via the tabIndexproperty. This example not only demonstrates the way you can mod- ify the tabbing behavior of a form on the fly but also how to force form elements out of thetabbing sequence entirely in IE. In this page, the upper form (named lab) contains four ele- ments. Scripts invoked by buttons in the lower form control the tabbing sequence. Noticethat the tabindexattributes of all lower form elements are set to -1, which means that thesecontrol buttons are not part of the tabbing sequence in IE. When you load the page, the default tabbing order for the labform control elements (defaultsetting of zero) takes charge. If you start pressing the Tab key, the precise results at firstdepend on the browser you use. In IE, the Address field is first selected; next the Tab sequencegives focus to the window (or frame, if this page were in a frameset); finally the tabbing reachesthe labform. Continue pressing the Tab key and watch how the browser assigns focus to eachof the element types. In NN6+, however, you must click anywhere on the content to get the Tabkey to start working on form controls. The sample script inverts the tabbing sequence with the help of a forloop that initializes twovariables that work in opposite directions as the looping progresses. This gives the last elementthe lowest tabIndexvalue. The skip2()function simply sets the tabIndexproperty of thesecond text box to -1, removing it from the tabbing entirely (IE only). Notice, however, that youcan click in the field and still enter text. (See the disabledproperty earlier in this chapter tosee how to prevent field editing.) NN6+ does not provide a tabIndexproperty setting thatforces the browser to skip over a form control. You should disable the control instead. Listing 15-16: Controlling the tabIndex Property