PART II
Chapter 5: Developing an Ajax Library 195
The first method introduced is AjaxTCR.util.DOM.getElementById(id [,startNode,
deepSearch]), a modified version of getElementById that finds a node specified by the
string specified by id starting either at the root node of the document or the node indicated
by the optional startNode parameter. You might wonder why we bother to introduce this
method since it seems to be identical to what is built-in. Well, we add to this the final Boolean
parameter deepSearch that you can set to true if you are interested in doing a full traversal
looking for the object of interest. This is the brute force approach discussed in the previous
chapter that is useful to work on XML packets received by an XHR.
Next, we take this method and call it from AjaxTCR.util.DOM.getElementsById(id(s),
startNode). This function can take more than a single string for an ID to search and instead
takes a list of values to look for. If more than one value is searched for, an array of the results is
returned. If only a single value is provided, just the one node is returned. Generally, the single
item fetching method will not be called unless there is a need for a brute force search, as this
method is a bit more flexible. However, it does actually revert to the brute force search method
if a start node is specified so it can be used with XML response packets as well. Because of the
high value of this method, it is remapped to a shorthand form $id().NNOT EOTE If you are concerned about collisions, you can turn off the remapping by setting the value
AjaxTCR.util.DOM.enableDOMShorthand to false. However, do note that the library
does not assume it should remap something if an existing value is found to be associated with an
identifier as shown in this small code snippet:
if (AjaxTCR.util.DOM.enableDOMShorthand)
{
if (typeof($id) == "undefined")
$id = AjaxTCR.util.DOM.getElementsById;
if (typeof($class) == "undefined")
$class = AjaxTCR.util.DOM.getElementsByClassName;
if (typeof($selector) == "undefined")
$selector = AjaxTCR.util.DOM.getElementsBySelector;
}The next convenience method provided is AjaxTCR.util.DOM
.getElementsByClassName(classToFind,startNode), which is also presented in
shorthand form as $class(classToFind,startNode). This method will return a list of all
DOM elements that have a class name that matches the string specified by classToFind.
The search can be limited by specifying a DOM node in the startNode parameter;
otherwise, the entire document is searched. Readers might assume that this is a wrapper of
an existing DOM idea but, in fact, document.getElementsByClassName() was not native
to browsers until the arrival of Firefox 3. However, the facility checks first if the browser
supports the concept before adding in the facility directly. This facility will be used quite a
bit in Chapter 8 when we bind JavaScript code to UI widgets.
Now, CSS class-based selection is quite useful, but it can get a bit messy if you want to
do selections like “find all p tags directly within a div tag called nav that are in class
fancy.” In CSS this could be easily specified by a selector like:div#nav > p.fancy { /* Some fancy style */ }