WebReference.com - Part 1 of chapter 5 from Creating Applications with Mozilla. From O'Reilly (6/6).

In addition to a basic set of attributes, an element may have many properties. These properties don't typically appear in the markup for the element, so they can be harder to learn and remember. To see the properties of an element object node, however, you can use a JavaScript for in loop to iterate through the list, as shown in Example 5-1.

 <box id="my-id" />
 <script>
   var el = document.getElementById('my-id');
   for (var list in el)
     dump("property  = "+list+"\n");
 </script>
 console output(subset):
 property = id
 property = className
 property = style
 property = boxObject
 property = tagName
 property = nodeName
 . . .

Note the implicit functionality in the el object itself: when you iterate over the object reference, you ask for all members of the class of which that object is an instance. This simple example "spells" the object out to the console. Since the DOM recognizes the window as another element (albeit the root element) in the Document Object Model, you can use a similar script in Example 5-2 to get the properties of the window itself.

The output in Example 5-2 is a small subset of all the DOM properties associated with a XUL window and the other XUL elements, but you can see all of them if you run the example. Analyzing output like this can familiarize you with the interfaces available from window and other DOM objects.

You can also use a DOM method to access elements with specific properties by using getElementsByAttribute. This method takes the name and value of the attribute as arguments and returns an array of nodes that contain these attribute values:

<checkbox id="box-one" />
<checkbox id="box-two" checked="true"/>
<checkbox id="box-three" checked="true"/>
<script>
var chcks = document.getElementsByAttribute("checked", "true");
var count = chcks.length;
dump(count + " items checked \n");
</script>

One interesting use of this method is to toggle the state of elements in an interface, as when you get all menu items whose disabled attribute is set to true and set them to false. In the xFly sample, you can add this functionality with a few simple updates. In the xfly.js file in the xFly package, add the function defined in Example 5-3.

 function toggleCheck( ) {
   // get the elements before you make any changes
   var chex   = document.getElementsByAttribute("disabled", "true");
   var unchex = document.getElementsByAttribute("disabled", "false");
   for (var i=0; i<chex.length; i++)
       chex[i].setAttributte("checked", "false");
   for (var i=0; i<unchex.length; i++)
       unchex[i].setAttributte("checked", "true");
 }

Although this example doesn't update elements whose disabled attribute is not specified, you can call this function from a new menu item and have it update all menus whose checked state you do monitor, as shown in Example 5-4.

 <menubar id="appbar">
   <menu label="File">
      <menupopup>
        <menuitem label="New"/>
        <menuitem label="Open"/>
      </menupopup>
   </menu>
   <menu label="Edit">
      <menupopup>
        <menuitem label="Toggle" oncommand="toggleCheck( );" />
      </menupopup>
   </menu>
   <menu label="Fly Types">
      <menupopup>
        <menuitem label="House" disabled="true" />
        <menuitem label="Horse" disabled="true" />
        <menuitem label="Fruit" disabled="false" />
      </menupopup>
   </menu>
 </menubar>

When you add this to the xFly application window (from Example 2-10, for example, above the basic vbox structure), you get an application menu bar with a menu item, Toggle, that reverses the checked state of the three items in the "Fly Types" menu, as seen in Figure 5-2.

The following section explains more about hooking scripts up to the interface. Needless to say, when you use a method like getElementsByAttribute that operates on all elements with a particular attribute value, you must be careful not to grab elements you didn't intend (like a button elsewhere in the application that gets disabled for other purpose). [To be continued in part 2. -Ed]

[previous]

Created: September 19, 2002
Revised: September 19, 2002

URL: https://webreference.com/programming/javascript/mozillaapps/chap5/1/6.html