SYSK 290: ASP.NET AJAX -- $get vs. $find

Microsoft ASP.NET AJAX comes with a new method for getting a reference to an object representing an element on the page, e.g. input control, button, etc. -- $get.

However, you might notice that there is another function that appears to do same thing – $find… So, what’s the difference between them, and which should you use and when?

First, let’s see how the two methods are implemented…

$get is an alias for getElementById. In addition, this function has additional code for those browsers that have not implemented getElementById. Here is how it’s defined:

var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) {

    /// <param name="id" type="String"></param>

    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>

    /// <returns domElement="true" mayBeNull="true"></returns>

    var e = Function._validateParams(arguments, [

        {name: "id", type: String},

        {name: "element", mayBeNull: true, domElement: true, optional: true}

    ]);

    if (e) throw e;

    if (!element) return document.getElementById(id);

    if (element.getElementById) return element.getElementById(id);

    // Implementation for browsers that don't have getElementById on elements:

    var nodeQueue = [];

    var childNodes = element.childNodes;

    for (var i = 0; i < childNodes.length; i++) {

        var node = childNodes[i];

        if (node.nodeType == 1) {

            nodeQueue[nodeQueue.length] = node;

        }

    }

    while (nodeQueue.length) {

        node = nodeQueue.shift();

        if (node.id == id) {

            return node;

        }

        childNodes = node.childNodes;

        for (i = 0; i < childNodes.length; i++) {

            node = childNodes[i];

     if (node.nodeType == 1) {

                nodeQueue[nodeQueue.length] = node;

            }

        }

    }

    return null;

}

$find is a shortcut for Sys.Application.findComponent. Components on the client… in JavaScript? Yes!

Here are some characteristics of components that differentiated them from controls and behaviors (source: http://ajax.asp.net/docs/tutorials/CreatingCustomClientComponentsTutorial.aspx):

1. Components typically have no physical UI representation, such as a timer component that raises events at intervals but is not visible on the page.

2. Have no associated DOM elements.

3. Encapsulate client code that is intended to be reusable across applications.

4. Derive from the Component base class.

So, the Sys.Application.findComponent function (implementation of the $find alias) is defined as follows:

var $find = Sys.Application.findComponent;

function Sys$_Application$findComponent(id, parent) {

        /// <param name="id" type="String"></param>

        /// <param name="parent" optional="true" mayBeNull="true"></param>

        /// <returns type="Sys.Component" mayBeNull="true"></returns>

        var e = Function._validateParams(arguments, [

     {name: "id", type: String},

            {name: "parent", mayBeNull: true, optional: true}

        ]);

        if (e) throw e;

        // Need to reference the application singleton directly beause the $find alias

        // points to the instance function without context. The 'this' pointer won't work here.

        return (parent ?

            ((Sys.IContainer.isInstanceOfType(parent)) ?

                parent.findComponent(id) :

                parent[id] || null) :

            Sys.Application._components[id] || null);

    }

It is recommended that you use the findComponent (or $find) method to get a reference to a Component object that has been registered with the application through the addComponent (or $create) method.

Note: if parent is not specified, the search is limited to top-level components; if parent represents a Component object, the search is limited to children of the specified component; if parent is a DOM element, the search is limited to children components of the specified element.

Looking at the code, you might be wondering on the performance difference… My tests show that as a general rule (i.e. given a page of average complexity and average number of controls and components) the performance is roughly the same between the $get and $find. However, my tests were not comprehensive.

Bottom line:

1. Both, $get and $find, appear return a reference to a DOM object created using markup or at runtime
2. Both, $get and $find, appear to return a component reference
3. While both methods work on elements and components, it’s recommended to use $get for elements and $find for components.