Dynamic HTML exposes all information about the document, including unrecognized elements and attributes. This feature can be used to create user-defined behavior based on custom elements and attributes. For example, you can write code that causes any UL element that is specified with the custom outline attribute to be expandable and collapsible. And you can define a new tag for defining constants and other behaviors in the document.
The benefit of these techniques is that code becomes much more generalized. No longer must a content author understand scripting to add complex behavior to elements. Developers can now write their code more intelligently and document how the content author can use this new functionality that custom attributes and elements offer.
All elements in the Body element of the document expose a click method. Scripts can use the click method to simulate a user clicking the element. The method fires the onclick event on the element, and then invokes any action the element takes by default when clicked. Because the onclick event is fired prior to the default action occurring, the developer can override the default action in an onclick event handler.
Because the object model exposes unrecognized attributes and their values, extra information can be easily attached to the element and manipulated using scripts. By adding unrecognized attributes, you can provide existing elements with additional behavior. For example, you can add an outline attribute to a list element to specify that the list can be expanded and collapsed. The code checks whether the user has clicked in a list that has the outline attribute defined and performs the appropriate action.
Using unrecognized attributes is a powerful way to simulate subclassing of an element. The behavior of the element can be completely customized and even overridden by using unrecognized attributes with event bubbling.
Determining the Existence of an Attribute
Custom attributes can be used to modify an element's behavior just by the attribute's presence. Code can check an element to see whether it has the attribute and perform an action if it does:
<IMG ID="image1" SRC="img1.gif" dragEnabled>
<H1 ID="header1">Test</H1>
<SCRIPT LANGUAGE="JavaScript">
alert(document.all.image1.getAttribute("dragEnabled") == null);
// false
alert(document.all.header1.getAttribute("dragEnabled") == null);
// true
</SCRIPT>
This example demonstrates adding custom attributes and simply checking for their existence. Code in Chapter 12, "Dynamic Positioning," extends this example by enabling any element with the dragEnabled attribute to be dragged around the document.
A custom attribute used in this way differs from a compact value in an important respect. The custom attribute signals a behavior just by its presence, unlike a compact value, which signals a behavior by having the value true. To turn off the drag ability of an element in the preceding example, code must remove the dragEnabled attribute using removeAttribute , not simply change its value to false.
Because unrecognized elements are exposed in the object model, you can add elements to the document that contain meta information or other processing information in a well-defined structured manner. For example, an unrecognized element such as <LASTEDITBY name="Scott Isaacs">, containing the name of the person who last edited the document, can be added to the document. This element can now be referenced through code:
// First instance of the LastEditBy element
document.all.tags("LASTEDITBY")[0].getAttribute("name")
All attributes of unrecognized elements and recognized elements can also be accessed in the object model. This technique can be used to define new behavior for a document, without modifying the scripts. For example, if a constant requires frequent changing by a nondeveloper, supplying it in an element or as an unknown attribute on an existing tag may be an appropriate approach. Or you could use a custom Sequence element to define a sequence of presentation effects to perform on the document.
This technique is extremely powerful for adding behavior to the document, but be careful when you are using invalid HTML to store information. In the future, if a custom-defined element becomes a valid element in HTML, there is potential for the page to no longer function properly.
HTML-Based Constants
By taking advantage of Dynamic HTML's ability to expose unrecognized elements, you can declare constants using HTML rather than within the code. The advantage to this approach is that constants can be edited without the need to modify or understand scripting.
The following code uses an unrecognized element, HTMLConstant, to store any necessary constants. HTMLConstant supports three attributes: id, value, and type. The id and value attributes are required; they specify the name of the constant and the default value. The type attribute is optional because all constants default to strings. If an integer or a floating constant is required, the type attribute must be specified.
<HTML>
<HEAD>
<TITLE>HTML-Based Constants</TITLE>
<HTMLCONSTANT id="startPosition" value="3" type="integer">
<HTMLCONSTANT id="endPosition" value="2.02" type="float">
<HTMLCONSTANT id="defaultUser" value="Scott" type="string">
<SCRIPT LANGUAGE="JavaScript">
function setupConstants() {
// Get all constants.
var Constants = document.all.tags("HTMLCONSTANT");
document._Constants = new Object();
for (var intLoop = 0; intLoop < Constants.length;
intLoop++) {
var temp = Constants[intLoop];
// Determine data type.
if ("integer" == temp.type)
document._Constants[temp.id] = parseInt(temp.value);
else if ("float" == temp.type)
document._Constants[temp.id] =
parseFloat(temp.value);
else
// String is default.
document._Constants[temp.id] = temp.value;
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="setupConstants()">
<H1>HTML-Based Constants</H1>
</BODY>
</HTML>
All constants are exposed on a subobject on the document, _Constants. Constants can be referenced as follows:
document._Constants.constantID
In the preceding document, constants are not available until the document is loaded because the onload event triggers the initialization of constants, allowing constants to be declared anywhere within the document. If access to the constants is required before the document is loaded, this function should be called during the parsing of the page. All constants must be defined before the script's location in the source.
Custom Content Containers
As demonstrated earlier, unrecognized tags can be used to add more contextual information to the document. This technique works well for creating contentless elements. Contentless elements do not have an end tag; they contain all their relevant information in attributes (similar to the IMG element).
The object model is not highly suited for creating custom content containers because of the way the elements are handled in the parsing tree. Unrecognized tags cannot have any children and therefore cannot have any text associated with them. Managing and associating contents with an unrecognized tag, while possible, is extremely difficult. This difficulty is not so much a shortcoming in the object model as a shortcoming in the design of HTML. There is no precise way to specify that an unrecognized element is a container and that an end tag should exist. Furthermore, the contents of the container will be rendered by any and all browsers because the element will not be recognized and therefore cannot have a style associated with it.
Although it is beyond the scope of this book, there is a markup language, called XML (Extensible Markup Language), that is designed for handling user-extensible elements. XML uses a syntax based on SGML and similar to HTML that can describe whether the element is a container or an empty element. For more information about XML, see the World Wide Web Consortium (W3C) Web site (www.w3.org) or Microsoft's Web site (www.microsoft.com).